Chart.js x-Axis step and x-axis labels Rotation angle interface

I. Why did you choose Chart.js?

There were too few chart processing libraries supported by Zepto,zepto in the original Project usage library. In order to make the project more lightweight, so the selection of chart.js.

But the final result is too bad, give up the char.js, or use Jquery+highstock to complete the chart needs.

Overall, the project's chart requirements are low, the project requires a lighter amount, and chart.js can be used.

There are several chart.js missing interfaces listed here.

　　

Two. Chart.js Missing interfaces

1. x-Axis step.

BUG: Many values, x-axis display labels coincident together.

Workaround: Add the Tickinterval interface

Locate the Option object, add Tickinterval, and the code is as follows

var scaleoptions = {  ...  This . Options.tickinterval,  ...}

Find the Draw function, process it below each, and the code is as follows

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-axis labels rotation angle interface.

feature:x axis label rotation angle is related to the data volume, the data volume is too large to choose the angle is very big, the data volume is small rotation angle is very small. But the reality is not unified, the effect is very poor, need unified rotation angle.

Implementation method: Add Customxlabelrota interface

　

Locate the Option object, add Customxlabelrota and Customxlabelrotaminnumber, and the code is as follows

var scaleoptions = {  ...  This . Options.customxlabelrota,    This . Options.customxlabelrotaminnumber,  ...}

Locate the Calculatexlabelrotation function. Add the following code

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. When hyperbola, the ToolTip will display multiple

The bug description is as follows, the workaround is to modify the ToolTip display to add the data, the completion of the resolution of the multi-curve code is not completed, here only to solve the hyperbolic situation, the code is as follows

Getpointsatevent:function(e) {varPointsarray =[], 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) {        returnPointsarray; }    if( This. datasets.length = = 1){        varNewpointsarray = [Pointsarray[parseint (POINTSARRAY.LENGTH/2)]]; }Else if( This. Datasets.length = = 2){        varNewpointsarray = [Pointsarray[parseint (POINTSARRAY.LENGTH/2)], Pointsarray[parseint (POINTSARRAY.LENGTH/2) +1]]; }Else {        varNewpointsarray =Pointsarray; }    returnNewpointsarray//end [Bugfix]    //return pointsarray;},

Chart.js x-Axis step and x-axis labels Rotation angle interface