安科网

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

移动开发与培训

移动开发与培训

2018-05-22

关注 关注

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" width="400" height="400"></canvas>

javascript部分：

  1. 引入Chart.js文件；
  2. 创建图表：实例化Chart对象（获取DOM节点取得2d context环境后实例化）；
  3. 实例化Chart对象后就继续创建具体类型的图表了；

曲线图（Line chart）：

html:

<canvas id="myChart" width="600" height="400"></canvas>

javascript:(引入及两种使用方式)

<script src="js/Chart.min.js"></script>
<script type="text/javascript">
 //方式一：
 var ctx = document.getElementById("myChart").getContext("2d");;
 var MyNewChart = new Chart(ctx).Line(data); //这种方式是只加载数据集，（缺省options）不修改默认参数（简称法一）

 //数据结构（数据参数设置）
 var data = {
 //折线图需要为每个数据点设置一标签。这是显示在X轴上。
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
 datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };

</script>

数据结构：

//数据结构（数据参数设置）
 var data = {
 //折线图需要为每个数据点设置一标签。这是显示在X轴上。
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
 datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };

图标参数：

Line.defaults = {
  //网格线是否在数据线的上面
  scaleOverlay : false,

  //是否用硬编码重写y轴网格线
  scaleOverride : false,

  //** Required if scaleOverride is true **
  //y轴刻度的个数
  scaleSteps : null,

  //y轴每个刻度的宽度
  scaleStepWidth : 20,

  // Y 轴的起始值
  scaleStartValue : null,
  // Y/X轴的颜色
  scaleLineColor: "rgba(0,0,0,.1)", 
  // X,Y轴的宽度
  scaleLineWidth: 1,
  // 刻度是否显示标签, 即Y轴上是否显示文字
  scaleShowLabels: true,
  // Y轴上的刻度,即文字
  scaleLabel: "<%=value%>",
  // 字体
  scaleFontFamily: "'Arial'",
  // 文字大小
  scaleFontSize: 16,
  // 文字样式
  scaleFontStyle: "normal",
  // 文字颜色
  scaleFontColor: "#666",
  // 是否显示网格
  scaleShowGridLines: true,
  // 网格颜色
  scaleGridLineColor: "rgba(0,0,0,.05)",
  // 网格宽度
  scaleGridLineWidth:2,
  // 是否使用贝塞尔曲线? 即:线条是否弯曲
  bezierCurve: true,
  // 是否显示点数
  pointDot: true,
  // 圆点的大小
  pointDotRadius:5,
  // 圆点的笔触宽度, 即:圆点外层白色大小
  pointDotStrokeWidth: 2,
  // 数据集行程(连线路径)
  datasetStroke: true,
  // 线条的宽度, 即:数据集
  datasetStrokeWidth: 2,
  // 是否填充数据集
  datasetFill: true,
  // 是否执行动画
  animation: true,
  // 动画的时间
  animationSteps: 60,
  // 动画的特效
  animationEasing: "easeOutQuart",
  // 动画完成时的执行函数
  /*onAnimationComplete: null*/
  }

（表示刚接触Chart.js，看到这图表参数整个人都懵了，还全程英文注释，呵呵~）

理解完图表参数后，就可以自定义图表参数啦，下面来看看具体事例用法：

html部分和js文件引入部分省略：（之后的图表类型也同样省略!）

<script type="text/javascript">
  //同样数据参数设置
  var data = {
  //折线图需要为每个数据点设置一标签。这是显示在X轴上。
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  //这边的thisId分别对应labels的id
   thisIds : [12,22,50,44,99,3,67],
  //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
  datasets: [{
   fillColor: "rgba(220,220,220,0.5)", //背景填充色
   strokeColor: "rgba(220,220,220,1)", //路径颜色
   pointColor: "rgba(220,220,220,1)", //数据点颜色
   pointStrokeColor: "#fff", //数据点边框颜色
   data: [10, 59, 90, 81, 56, 55, 40] //对象数据
  }, {
   fillColor: "rgba(151,187,205,0.5)",
   strokeColor: "rgba(151,187,205,1)",
   pointColor: "rgba(151,187,205,1)",
   pointStrokeColor: "#fff",
   data: [28, 48, 40, 19, 96, 27, 200]
  }]
  };
 window.onload = function() {
   var ctx = document.getElementById("myChart").getContext("2d");;
   //方式二：传入对象字面量去修改默认图标参数，自定义图表
   var MyNewChart = new Chart(ctx).Line(data, {
   // 网格颜色
   scaleGridLineColor: "rgba(255,0,0,1)",
   // Y/X轴的颜色
   scaleLineColor: "rgba(0,0,0,.1)",
   // 文字大小
   scaleFontSize: 16,
   // 文字颜色
   scaleFontColor: "#666",
   // 网格颜色
   scaleGridLineColor: "rgba(0,0,0,.05)",
   // 是否使用贝塞尔曲线? 即:线条是否弯曲
   // 是否执行动画
   animation: true,
   // 动画的时间
   animationSteps: 60,
   // 动画完成时的执行函数
   onAnimationComplete: function(){
    console.log("给x轴的lable对应的id：");
    console.log(data.thisIds);
   }
   });
  }
</script>

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

柱状图：

new Chart(ctx).Bar(data,options);//简记，options可缺省

数据结构：

var data = {
 labels : ["January","February","March","April","May","June","July"],
 datasets : [
 {
  fillColor : "rgba(220,220,220,0.5)",
  strokeColor : "rgba(220,220,220,1)",
  data : [65,59,90,81,56,55,40]
 },
 {
  fillColor : "rgba(151,187,205,0.5)",
  strokeColor : "rgba(151,187,205,1)",
  data : [28,48,40,19,96,27,100]
 }
 ]
}

图标参数：

Bar.defaults = {
  //网格线是否在数据线的上面
  scaleOverlay : false,

  //是否用硬编码重写y轴网格线
  scaleOverride : false,

  //** Required if scaleOverride is true **
  //y轴刻度的个数
  scaleSteps : null,
  //y轴每个刻度的宽度
  scaleStepWidth : null, 
  //Y轴起始值
  scaleStartValue: null,
  // Y/X轴的颜色
  scaleLineColor: "rgba(0,0,0,.1)",
   // X,Y轴的宽度
  scaleLineWidth: 1,
  // 刻度是否显示标签, 即Y轴上是否显示文字
  scaleShowLabels: false,
  // Y轴上的刻度,即文字
  scaleLabel: "<%=value%>",
  // 字体
  scaleFontFamily: "'Arial'",
   // 文字大小
  scaleFontSize: 12,
  // 文字样式
  scaleFontStyle: "normal",
  // 文字颜色 
  scaleFontColor: "#666",
  // 是否显示网格
  scaleShowGridLines: true,
  // 网格颜色
  scaleGridLineColor: "rgba(0,0,0,.05)",
  // 网格宽度
  scaleGridLineWidth: 1,

  //Bar Chart图表特定参数：
  //是否绘制柱状条的边框
  barShowStroke : true,
  //柱状条边框的宽度
  barStrokeWidth : 2,
  //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
  barValueSpacing :5,
  //每组柱状条组中柱状条之间的间距
  barDatasetSpacing :5,
  // 是否显示提示
  showTooltips: true, 

  // 是否执行动画
  animation: true,
  // 动画的时间
  animationSteps: 60,
  // 动画的特效
  animationEasing: "easeOutQuart",
  // 动画完成时的执行函数
  onAnimationComplete: null
  }

部分javascript实例

var barChart = new Chart(ctx).Bar(data, {
   scaleLabel: "$"+"<%=value%>",
   //是否绘制柱状条的边框
   barShowStroke: true,
   //柱状条边框的宽度
   barStrokeWidth: 2,
   //柱状条组之间的间距(过大或过小会出现重叠偏移错位的效果，请控制合理数值)
   barValueSpacing: 5,
   //每组柱状条组中柱状条之间的间距
   barDatasetSpacing: 5,
   });

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

饼图：

javascript:

new Chart(ctx).Pie(data,options);

数据结构：

var data=[
  {
  value:40,
  color:"#21F0EA",//背景色
  highlight:"#79E8E5",//高亮背景颜色
  label:'javascript'//文字标签
  },{
  value:60,
  color:"#E0E4CC",
  highlight:"#EAEDD8",
  label:'jquery'
  },{
  value:100,
  color:"#69D2E7",
  highlight:"#83E5F7",
  label:'html'

  }
 ];

图标参数：

Pie.defaults = {
   //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke : true,
   //设置每段行程的边框颜色
   segmentStrokeColor : "red",
   //心啊是每段扇区边框的宽度
   segmentStrokeWidth :2,
   //Boolean - 是否执行动画
   animation : true,
   //Number - 动画时间
   animationSteps : 100,
   //String - 动画的效果
   animationEasing : "easeOutBounce",
   //Boolean -是否旋转动画
   animateRotate : true,
   //Boolean - 是否动画缩放饼图中心（效果不错）
   animateScale : true,
   //Function - 火动画完成时执行的函数
   onAnimationComplete : null
  }

部分javascript实例：

var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
   //是否显示每段行程（即扇形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke : true,
   //设置每段行程的边框颜色
   segmentStrokeColor : "red",
   //每段扇区边框的宽度
   segmentStrokeWidth :2,
   //Boolean - 是否执行动画
   animation : true,
   //Number - 动画时间
   animationSteps : 100,
   //String - 动画的效果
   animationEasing : "easeOutBounce",
   //Boolean -是否旋转动画
   animateRotate : true,
   //Boolean - 是否动画缩放饼图中心（效果不错）
   animateScale : true,
   //Function - 动画完成时执行的函数
   //onAnimationComplete : null
  });

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

环形图：

javascript:

new Chart(ctx).Doughnut(data,options);

数据结构：

//数据结构（与饼图相似）
  var data = [{
  value: 30,
  color: "#F7464A",
  highlight: "#FA7C7C",
  label: "angularJS"
  }, {
  value: 50,
  color: "#E2EAE9",
  highlight: "#F2F5F5",
  label: "juqery"
  }, {
  value: 100,
  color: "#D4CCC5",
  hightlight: "#DBD6D1",
  label: "javascript"
  }, {
  value: 40,
  color: "#949FB1",
  highlight: "#AFBCCE",
  label: "nodeJS"
  }, {
  value: 120,
  color: "#4D5360",
  highlight: "#767C86",
  label: "html"
  }];

图标参数：

Doughnut.defaults={
   //是否显示每段行程（即环形区，不为true则无法看到后面设置的边框颜色）
   segmentShowStroke: true,
   //设置每段行程的边框颜色
   segmentStrokeColor: "#fff",
   //设置每段环形的边框宽度
   segmentStrokeWidth: 2,
   //图标中心剪切圆的比例（0为饼图，接近100则环形宽度越小）
   percentageInnerCutout: 50,
   //是否执行动画
   animation: true,
   //执行动画时间
   animationSteps: 100,
   //动画特效
   animationEasing: "easeOutBounce",
   //是否旋转动画
   animateRotate: true,
   //是否缩放图表中心
   animateScale: true,
   //动画完成时的回调函数
//   onAnimationComplete: null

  }

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

Chart.js总共有六大图表：除此之外，还有剩下两种：雷达图或蛛网图、极地区域图，读者请自行参考：Chart.js中文文档

那么，问题来了！？图表的图例怎么办？这货在应用中也是很常用的！经过多次的查阅，找到以下方法实现图例部分，膜拜一下各路大神先！除此之外，还可以动画完成后将各组数据自动显示，而不用手动查看各组数据！

直接上各部分代码：

html部分：

<h2>柱状图</h2>
<canvas id="barChart" width="400" height="300"></canvas>
<!--这里添加了用来放置图例的div标签-->
<div id="legend"></div>

css部分：（不设置基础样式的话，可能看不出预期的效果）

<style>
  ul,li{
  list-style-type:none;;
  }
  ul>li{
  margin:5px auto;
  font-family: "微软雅黑";
  }
  span{
  display: inline-block;
  width:20px;height:20px;line-height: 20px;
  vertical-align:middle;
  margin-right:5px;
  }
 </style>

javascript部分：

window.onload = function() {
   var ctx = document.getElementById("barChart").getContext("2d");
   var barChart = new Chart(ctx).Bar(data, {
   showTooltips: false, // 是否显示提示,这里需要设置为false
   //模板
   legendTemplate: 
   '<ul class=\"<%=name.toLowerCase()%>-legend\">'+
   '<% for (var i=0; i<datasets.length; i++){%>'+
   '<li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span>'+
   '<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>'+
   '<%}%>'+
   '</ul>',
   onAnimationComplete: function() {//动画完成后显示对应的数据
    var ctx = this.chart.ctx;
    ctx.font = this.scale.font;
    ctx.fillStyle = this.scale.textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.datasets.forEach(function(dataset) {
    dataset.bars.forEach(function(bar) {
     ctx.fillText(bar.value, bar.x, bar.y);
    });
    });
   }
   });
   var legend = document.getElementById('legend');
   // 图例
   legend.innerHTML = barChart.generateLegend();
  }
 //数据结构：
  var data = {
  labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
  datasets: [{
   fillColor: "rgba(220,220,220,0.5)",
   strokeColor: "rgba(220,220,220,1)",
   data: [65, 59, 90, 81, 56, 55, 40],
   label: "本月销售额"//图例标签
  },{
   fillColor: "#69D2E7",
   strokeColor: "#B2E5ED",
   data: [54, 99, 72, 61, 86, 65, 84],
   label: "本季度销售额"
  }]
  };

效果图：

Chart.js 轻量级HTML5图表绘制工具库（知识整理）

总结：

chart html5 图表工具 轻量级

移动开发与培训

移动开发与培训

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

4个顶级开源JavaScript图表库

图表对于可视化数据和使网站具有吸引力非常重要。可视化演示使分析大块数据和传达信息变得更加容易。有四个顶级开源JavaScript图表库，你一定要Get!使用Chart.js，你可以创建各种令人印象深刻的图表和图形，包括条形图，折线图，面积图，线性比例和散点

Lostthewind 2019-06-29

啥？Python竟然也可以制作萌萌的手绘图表

大家可能已经习惯了用Matplotlib和seaborn来制作不同的图表，但是今天要介绍一个非常酷的Python手绘风格的可视化包：cutecharts。这个包可以用来生成以下几种看起来像手绘的图表，在某些场景下效果可能更好。这些可爱的图表还具有交互性和动

dflyzx 2020-09-23

Helm v3 入门

K8S上的应用对象，都是由特定的资源描述组成，包括deployment、service等。且由于缺少对发布过的应用版本管理和控制，使Kubernetes上的应用维护和更新等面临诸多的挑战，主要面临以下问题：。Helm是一个 Kubernetes 的包管理工

hubanbei00的家园 2020-07-18

highcharts与ajax的应用

公司近日有个需求，报表的数据以图表的形式展现出来。找了很多相关的资料，最后决定用highcharts图表。对个人用户完全免费；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼状图、散布图；

春雨的雕刻时光 2020-06-10

k8s学习-Helm

在没使用 helm 之前，向 kubernetes 部署应用，我们要依次部署 deployment、svc 等，步骤较繁琐。况且随着很多项目微服务化，复杂的应用在容器中部署以及管理显得较为复杂，helm 通过打包的方式，支持发布的版本管理和控制，很大程度上

kjh00abc 2020-05-31

Python对数据写入Execl文件并生成图表

为了做测试或者对爬虫程序爬取数据进行分析汇总，我们时常会将数据生成报表，但是如果我们想将报表生成在Excel中，这时候就可以借助xlsxwriter第三方包来生成图表。["IOS岗位数", "Android岗位数",

yuanshuai 2020-05-20

k8s记录-helm使用

Helm是k8s的包管理工具，类似Linux系统常用的 apt、yum等包管理工具。Release：在 Kubernetes 集群上运行的 Chart 的一个实例。每次安装都会创建一个新的 release。例如一个 MySQL Chart，如果想在服务器上

JustHaveTry 2020-05-19

K8S 部署 Rancher 2.X 版本

Rancher是一套容器管理平台，它可以帮助组织在生产环境中轻松快捷的部署和管理容器。Kubernetes不仅已经成为的容器编排标准，它也正在迅速成为各类云和虚拟化厂商提供的标准基础架构。Rancher支持各类集中式身份验证系统来管理Kubernetes集

xingyuzhe 2020-05-12

Helm3安装及使用

对于使用者而言，使用Helm后不用需要了解Kubernetes的Yaml语法并编写应用部署文件，可以通过Helm下载并在kubernetes上安装需要的应用，除此以外，Helm还提供了kubernetes上的软件部署，删除，升级， 回滚应用的强大功能。he

xingyuzhe 2020-04-26

k8s中helm安装部署，升级和回滚（chart，helm，tiller，StorageClass）

helm是基于kubernetes 的包管理器。它之于 kubernetes 就如 yum 之于 centos，pip 之于 python，npm 之于 javascript. 那 helm 的引入对于管理集群有哪些帮助呢？更方便地部署自己的应用，为公司内

kjh00abc 2020-03-03

Kubernetes服务编排的利器——Helm

采用apt-get/yum,应用开发者可以管理应用包之间的依赖关系，发布应用；用户则可以以简单的方式查找、安装、升级、卸载应用程序。对于应用发布者而言，可以通过Helm打包应用，管理应用依赖关系，管理应用版本并发布应用到软件仓库。对于使用者而言，使用Hel

xingyuzhe 2020-03-01

你不得不了解 Helm 3 中的 5 个关键新特性

两个月前，它发布了第三个主要版本，Helm 3。在这一新版本中，有许多重大变化。本文作者将介绍自己认为最关键的 5 个方面。Helm 最终移除了其服务器端组件，Tiller。Tiller 之前是一个运行在 Kubernetes 上的小型应用程序，它用于监听

xingyuzhe 2020-02-12

你不得不了解Helm 3中的5个关键新特性

Helm是Kubernetes的一个软件包管理器。两个月前，它发布了第三个主要版本，Helm 3。在这一新版本中，有许多重大变化。本文将介绍我认为最关键的5个方面。Helm最终移除了其服务器端组件，Tiller。Tiller之前是一个运行在Kubernet

技术积累LZ 2020-01-13

k8s中helm的使用

什么是 Helm在没使用 helm 之前，向 kubernetes 部署应用，我们要依次部署 deployment、svc 等，步骤较繁琐。然后调用 Kubectl 自动执行 K8s 资源部署Helm 是官方提供的类似于 YUM 的包管理器，是部署环境的流

CurrentJ 2020-01-06

ASP.NET Core on K8S深入学习（10）K8S包管理器Helm

本篇已加入《.NET Core on K8S学习实践系列文章索引》，可以点击查看更多容器化技术相关系列文章。　　虽然K8S能够很好地组织和编排容器，但是缺少一个更高层次的应用打包工具，而Helm就是专门干这个事的。　　通过Helm能够帮助开发者定义、安装和

limx 2019-12-09

Python绘图还在用Matplotlib？out了 ！发现一款手绘可视化神器！

今天，给大家介绍一个很酷的 Python 手绘风格可视化神包：cutecharts。和 Matplotlib 、pyecharts 等常见的图表不同，使用这个包可以生成下面这种看起来像手绘的各种图表，在一些场景下使用效果可能会更好。觉得不错就赶紧去尝尝鲜！

xiaoxiaoniaoer 2019-12-04

JavaScript使用百度ECharts插件绘制饼图操作示例

本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下：。百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业级数据

Sincelily 2019-11-26

正式开放 | 阿里云 10 亿级镜像服务正式支持 Helm Charts，云原生交付再加速！

2018 年 6 月，Helm 正式加入了 CNCF 孵化项目；2018 年 8 月，据 CNCF 的调研表明，有百分之六十八的开发者选择了 Helm 作为其应用包装方案；2019 年 6 月，阿里云正式开放了开放云原生应用中心，为国内用户提供了海量的本地

JustHaveTry 2019-11-04

用CSS画鱼刺图

需求及解决思路：用一张背景图画出鱼骨，上面分若干鱼刺，每个鱼刺为一个div,div里也有一个表示指向关系的背景图，每根鱼刺上的div都会有三个状态，收起，半展开，全展开。里面的部分指标内容会根据需要隐藏或展现。里面的内容分为四种类型的指标:汇总类目项，类目

CSSEIKOCS 2014-06-26

基于HTML5 Canvas的3D动态Chart图表

发现现在工业SCADA上或者电信网管方面用图表的特别多，虽然绝大部分人在图表制作方面用的是echarts，他确实好用，但是有些时候我们不能调用别的插件，这个时候就得自己写这些美丽的图表了，然而图表轻易做不成美丽的。。。看到有一个网站上在卖的图表，感觉挺好看

yuanlintufang 2017-11-02
移动开发与培训

移动开发与培训

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号