前言

最近在项目中，需要在页面上画一个图表，需要一个扇形图和一个柱状图。虽然可以用svg或者canvas来画，但是难度不一定赏心悦目。因此，主流第三方图表库连接到项目使用。下面主要记录我在使用过程中的一些体会和解决方法。具体教程请参考官方文档。

技术选择

本文研究了四个图表库：Highcharts、百度的e-Charts、阿里的G2和Charts.js，由于项目对图表的需求不大，图表也不复杂，引入了轻量级的Charts.js。Chart.js使用简单，只需要参考页面中的脚本文件，创建canvas节点即可渲染图表。并为您的数据提供8种可视化显示模式，每种模式都具有动态效果和可定制性；所有现代浏览器上的高效绘图效率(IE9)；反应灵敏的布局。

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

介绍

在GitHUb上下载源代码，将dist/Chart.bundle.js文件引入项目中使用；查看源代码，发现兼容多种模块加载方式，所以使用requireJs在页面中加载。

使用经验

(1)图表颜色值的数量不能等于数据的数量，例如

var pieConfig={ type: 'pie '，data : { dataset 3360[{ data :[10，20]，backgroundColor: ['#debd5a '，' #ff6d4a '，' # 3cc9bf '，' #7599e9 '，]} } } }您可以取消响应式选项： {Responsive : false}，这便于控制图表的大小。图表和画布一样大，画布不会自动填满外部容器。

取消图例的点击事件，因为点击图例默认会隐藏这个数据的比例，所以我需要去掉点击事件，设置图例3360 {onclick 3360 function () {}}，修改点击事件。

将图例从默认矩形修改为正方形，并设置图例的字体大小和颜色值

选项： {图例： {位置： '右侧'，标签: {框宽： 14，//修改宽度fontsize : 14，字体颜色：' # 66666'}}具有以下效果

从直方图中去掉网格线，设置轴的颜色，矩形的宽度，从0开始显示Y轴数据。由于使用了Chart.js 2.0，配置参数发生了很大的变化，所以网上很多栏目都失败了。这是一个有效的配置代码

选项： { scales : { xax : [{ gridlines 3360 { color : ' rgba(0，0，0，0)'，//隐藏x轴方向轴零线颜色： ' # 66666 '//设置轴颜色}，BarPercentage: 0.2，//设置列宽tick 3360 {//设置字体大小和颜色值Fontsize 3360 12，FontColor 3360

在工具提示的数据中增加单位，可以通过工具提示的回调函数进行设置。

tooltipp : { callbacks : { label : }函数(tooltipItem，data){ var value=data . dataset[tooltipItem . datasetindex]。数据[ToolTipItem . index]“%”；var title=data . labels[tooltipitem . index]' : '；返回标题值；}}}效果如下

工具提示： {回调： {标签:函数(tooptipitem) {return tooptipitem。伊拉贝尔“每一个”；}}}效果如下

摘要

请原谅我语言能力有限，表达能力差。这篇文章主要是作为我自己项目的总结。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。