标签：
一. 当初为什么选择chart.js
当初项目使用库是Zepto，Zepto能支持的chart处理库太少。也是为了使得项目比较轻量化，所以选择了chart.js。
但是最后的显示结果实在太差，放弃了char.js，还是使用jquery+highstock来完成chart需求。
总而言之，项目的chart需求较低，项目要求较轻量，可以使用chart.js。
这里列出几个chart.js缺少的接口。
二. chart.js缺少的接口
1. x轴步长。
bug：数值很多，x轴显示的labels重合在一起了。
解决方法：添加tickInterval接口
找到option对象，添加tickInterval，代码如下
var scaleOptions = { ... tickInterval : this.options.tickInterval, ... }
找到draw函数，在each下面处理，代码如下
draw : function(){ ... each(this.xLabels, function(label, index){ ... ctx.lineWidth = this.lineWidth; ctx.strokeStyle = this.lineColor; // handle tickInterval if (this.tickInterval) { if (parseInt((index % this.tickInterval).toFixed(0)) !== 0) return; } ... }, this) ... }
2. X轴Labels旋转角度接口。
Feature：x轴Label旋转角度与数据量有关，数据量过多选装角度很大，数据量小则旋转角度很小。但是现实不统一，效果很差，需要统一旋转角度。
实现方法：添加customXLabelRota接口
找到option对象，添加customXLabelRota和customXLabelRotaMinNumber，代码如下
var scaleOptions = { ... customXLabelRota : this.options.customXLabelRota, customXLabelRotaMinNumber : this.options.customXLabelRotaMinNumber, ... }
找到calculateXLabelRotation函数。添加如下代码
calculateXLabelRotation: function(){ ... if ...{ ... if (this.customXLabelRota && this.xLabels) { if (this.customXLabelRotaMinNumber) { if (this.customXLabelRotaMinNumber < this.xLabels.length) { this.xLabelRotation = this.customXLabelRota; } } else { this.xLabelRotation = this.customXLabelRota; } } } else { ... } }
3. 双曲线时，tooltip会显示多个
bug描述如下，解决方法是修改tooltip显示时添加的data，完成的解决多曲线的代码没有完成，这里只解决双曲线的情况，代码如下
getPointsAtEvent : function(e){ var pointsArray = [], eventPosition = helpers.getRelativePosition(e); helpers.each(this.datasets,function(dataset){ helpers.each(dataset.points, function(point){ if (point.inRange(eventPosition.x,eventPosition.y))
pointsArray.push(point); }); },this); // start [BugFix]: show too much tooltips if (this.datasets.length >= pointsArray.length){ return pointsArray; } if (this.datasets.length == 1){ var newPointsArray = [pointsArray[parseInt(pointsArray.length / 2)]]; }else if (this.datasets.length == 2){ var newPointsArray = [pointsArray[parseInt(pointsArray.length / 2)], pointsArray[parseInt(pointsArray.length / 2)+1]]; }else { var newPointsArray = pointsArray; } return newPointsArray // end [BugFix] //return pointsArray; },
标签：
原文地址：http://www.cnblogs.com/ccblogs/p/5257499.html
