chart.js的X轴步长和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;
},
时间: 2024-10-15 02:23:33

chart.js的X轴步长和X轴Labels旋转角度接口的相关文章

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

Chart.js Y轴数据以百分比展示

新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽然总是几篇文章复制粘贴,但还有有收获,然后自己捣鼓半天总算是弄出来了... 首先参考: http://www.chartjs.org/docs/latest/ 引用js,学习基本等等... 然后数据什么的就不说了直说怎么展示, 在配置文件中yAxes>ticks>callback 中设置你需要在Y

chart.js

一款基于html5的统计图片插件,它可以简单快捷的制作出多种形状的非常漂亮且直观的统计图,当然,这么实用的工具必须得支持主流的浏览器,后面会说到如何让低版的浏览器也支持.在这里还有一点说明,jQ酷只做与jquery相关的插件或文章,但这个让我破例了,因为它太强大了,虽与jquery没有半毛钱的关系,但还是要拿出来和大家分享下,下面我们来开始使用它. 引入Chart.js <script src="Chart.js"></script 建立HTML <canvas

js 统计图插件chart.js

chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src="<%=path%>/js/mapping/Chart.js"></script> 第二步绘制控件 样式可以自己定义但是id不能改变 <canvas id="canvas"  height="600" width="

Chart.js | HTML5 图表绘制工具库(知识整理、中文注释、中文文档)

Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

angulajs中引用chart.js做报表,修改线条样式

目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题 1.下载chart js,可以用bower 命令下载 http://www.chartjs.org/docs/#line-chart-example-usage 2.html页面代码 <canvas id="leaderline" class="chart chart-line" data="data" labels="labels" legend=&qu

chart.js轻量级图表插件使用

安装下载 下载地址:https://github.com/chartjs/Chart.js/releases/latest cdn LINK:https://cdnjs.com/libraries/Chart.js 文档:http://chartjs.cn/docs/ Chart.js有两种不同的版本.常规版本的Chart.js和 Chart.min.js,附带chart.js库的同时还带着颜色解析器.如果你想使用这个版本并且在你的图表中使用时间轴,你需要在安装Chart.js之前安装上Mome

Salesforce Lightning组件中使用Chart.JS实现数据可视化

之前尝试过Google Chart来实现数据可视化(可以查看我之前的博客Google Chart 之 Area Chart案例),但是很遗憾,Google Chart是无法集成到Salesforce Lightning中的,理由嘛,Google JavaScript会跟Google通信,而且具有脚本的外部引用,但是Sales force的安全策略是不允许这样做的,据我所知,到目前为止是没有解决方法的,所以我们来学习下Chart.JS,这个开源的第三方JS库提供了交互式可视化组件,关键是,它是可以

Html5之高级-7 HTML5 Chart.js(概述、入门、使用)

一.Chart.js 概述 Chart.js 简介 - Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库 - 官方地址: http://www.chartjs.org/ Chart.js 特点 - 基于 HTML 5 - Chart.js 基于 HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案 - 简单.灵活 - Chart.js 不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法 Chart.js