chart.js接口开发：X轴步长和Labels旋转角

一. 当初为什么选择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;},

原标题：chart.js接口开发：X轴步长和Labels旋转角

关键词：JS