详解Chart.js轻量级图表库的使用经验

前言

最近项目中遇到一个在页面中画图表的需求,需要一个扇状图和一个柱状图,虽然能使用svg或canvas绘制,但吃力还不一定讨好,所以研究接入了主流的第三方图表库供项目使用。下面主要记录我使用过程中的一些体验和解决方法,具体教程请移步官方文档。

技术选型

研究了Highcharts、百度的ECharts、阿里的G2Charts.js四个图表库,由于项目对图表需求不大,图表不复杂,所以引入了轻量级的Charts.js。Chart.js很容易上手,只需要在页面中引用脚本文件,并创建 <canvas> 节点即可渲染出图表。且为你的数据提供 8 种可视化展现方式,每种方式都具有动态效果并且可定制;在所有现代浏览器(IE9+)上都有高效的绘图效率;响应式布局。

GitHub源码: https://github.com/nnnick/Chart.js
Chart.js文档:http://www.bootcss.com/p/chart.js/

引入

GitHUb上下载源码,把里面的dist/Chart.bundle.js文件引入项目即可使用;查看源码,发现其兼容了多种模块加载方式,所以我使用requireJs在页面中加载。

使用经验

①图表颜色值个数可以不与数据个数相等,如

var pieConfig = {
   type: 'pie',
   data: {
     datasets: [{
      data: [10, 20],
      backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
     }]
  }
}

②可以取消响应式options: {responsive: false},方便控制图表的大小,canvas多大图表便多大,canvas不会自动占满外层容器。

③取消legend的点击事件,因为点击legend会默认隐藏该数据的占比,所以我需要去掉点击事件,设置legend: {onClick: function () {}},修改点击事件。

④把legend由默认的矩形修改成正方形,设置legend的字体大小和色值

options: {
  legend: {
   position: 'right',
   labels: {
    boxWidth: 14,// 修改宽度
    fontSize: 14,
    fontColor: '#666666'
   }
}

效果如下

⑤柱状图去掉网格线,设置轴线颜色、矩形的宽度和y轴数据从0开始展示。由于使用的Chart.js 2.0,配置参数变化很多,所以网上很多列子已失效,这里给出有效的配置代码

options: {
  scales: {
   xAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏x轴方向轴线
     zeroLineColor: '#666666'// 设置轴颜色
    },
    barPercentage: 0.2,// 设置柱宽度
    ticks: {// 设置轴文字字号和色值
     fontSize: 12,
     fontColor: '#666666'
    }
   }],
   yAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏要y轴轴线
     zeroLineColor: '#666666'
     },
     ticks: {
      fontSize: 12,
      beginAtZero: true,// y轴数据从0开始展示
      fontColor: '#666666'
      }
   }]
  }
}

效果如下

⑥给图表tooltips的数据加上单位,可以使用tooltips的callback函数设置

tooltips: {
 callbacks: {
  label: function (tooltipItem, data) {
   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%';
   var title = data.labels[tooltipItem.index] + ':';
   return title + value;
   }
  }
}

效果如下

tooltips: {
  callbacks: {
   label: function (tooptipItem) {
    return tooptipItem.yLabel + '个' ;
   }
  }
}

效果如下

总结

语言功底有限,表达不到位敬请原谅,本文主要作为自己项目总结使用。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 常用的9个JavaScript图表库详解

    当前,数据可视化已经成为数据科学领域非常重要的一部分.不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析. 对任何一个组织来说,如果能够充分的获取数据.可视化数据和分析数据,那么就能很大程度上帮助了解数据产生的深层次原因,以便据此做出正确的决定. 对于前端开发人员来说,如果能够掌握交互式网页中的数据可视化技术,则是一项很棒的技能.当然,通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易.使用这些库,开发者可以在无需考虑不同的语法所带来的编

  • 一个加密JavaScript的开源工具PACKER2.0.2

    这是一个并非很复杂的编码工具,编码过后可以被浏览器直接识别.新浪在用.比如:http://comment4.news.sina.com.cn/comment/cmnt_xml.js 从这里进入http://dean.edwards.name/packer/,很简单的一个界面. 设置也很简单Numeric (Base 10) :所有的字符都被编码成数字Normal (Base 62) :所有的字符都被编码成字母与数字符号构成的值.这是推荐的方式.High ASCII (Base 95) :这种方式

  • 使用Chart.js图表库制作漂亮的响应式表单

    入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的

  • 利用noesis.Javascript开源组件.Net中执行javascript脚本

    界面如下: 然后,click filter button后的UI: 看,筛选出来了,代码如下(js能调C#写的UserInfo类的各个属性) 复制代码 代码如下: public class UserInfo    {        public string FirstName { get; set; }        public string LastName { get; set; }        public int Age { get; set; }        public ov

  • 4个顶级开源JavaScript图表库

    图表对于可视化数据和使网站具有吸引力非常重要.可视化演示使分析大块数据和传达信息变得更加容易.JavaScript图表库使你能够以易于理解和交互的方式可视化数据,并改善网站的设计.有四个顶级开源JavaScript图表库,你一定要Get! 1.Chart.js Chart.js是一个开源JavaScript库,允许你在应用程序上创建动画,美观和交互式图表.它可以在MIT许可下获得. 使用Chart.js,你可以创建各种令人印象深刻的图表和图形,包括条形图,折线图,面积图,线性比例和散点图.它完全

  • javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

    gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲线图. gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+. 使用方法:在页

  • 优秀js开源框架-jQuery使用手册(1)

    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!   下载地址:http://jquery.com 下载完成后先加载到文档中,然后我们来看个简单的例子!<script language="javascript" type="text/javascript">       $(document).ready(f

  • jQuery EasyUI 开源插件套装 完全替代ExtJS

    前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码 代

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • Node.js开源应用框架HapiJS介绍

    一.HapiJS介绍 HapiJS是一个开源的.基于Node.js的应用框架,它适用于构建应用程序和服务,其设计目标是让开发者把精力集中于开发可重用的应用程序的业务逻辑,向开发者提供构建应用程序业务逻辑所需的基础设施.HapiJS目前的最新版本为7.2.0版. 二.HapiJS安装和项目配置 1.安装Hapi库 HapiJS的安装很简单,执行如下命令: 复制代码 代码如下: $ sudo npm install hapi -g hapi@7.2.0 /usr/local/lib/node_mod

  • Java中使用开源库JSoup解析HTML文件实例

    HTML是WEB的核心,互联网中你看到的所有页面都是HTML,不管它们是由JavaScript,JSP,PHP,ASP或者是别的什么WEB技术动态生成的.你的浏览器会去解析HTML并替你去渲染它们.不过如果你需要自己在Java程序中解析HTML文档并查找某些元素,标签,属性或者检查某个特定的元素是否存在的话,那又该如何呢?如果你已经使用Java编程多年了,我相信你肯定试过去解析XML,也使用过类似DOM或者SAX这样的解析器,不过很有可能你从未进行过任何的HTML解析的工作.更讽刺的是,在Jav

  • 开源的javascript项目Kissy介绍

    kissy简介 kISSY是什么? KISSY是一个开源的javascript项目,其主体是一个前端UI开发框架,即KissyUI.本文所述的kissy是仅指其内核部分的kissy.js中的语言与框架设计思想.KISSY项目的开源网站是:http://kissyteam.github.com/ kissy怎么使用呢? 尽管在KissyUI向kissy内核化的过程中,我们提出了一些新的概念与框架模型,但事实上,我们并未改变KissyUI的任何使用惯例.从代码上来看,kissy.js和lang.js

随机推荐