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; },
复制代码

 

posted @   小骚木  阅读(5626)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示