图表插件 - chart.js (柱状图) 学习总结

chart.js 基于H5的canvas,轻量级的图表插件。
有6中图表类型：折线图、条形图、雷达图、饼图、柱状图、极地区域图

关于柱状图的绘制，追加、更新、删除数据等操作的总结

原文来自于：http://lishangrong.github.io/2016/01/28/20160128-chartjs(bar)/

html:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script src="js/Chart.min.js"></script><title>bar chart</title></head><body>      <div class="bar-chart"><h5 class="bar-title">XX饮料营业额情况一览表</h5><canvas id="bar" width=400 height=400></canvas><div id="legend"></div></div>  </body></html>

css:.bar-legend li span {width: 1em;height: 1em;display: inline-block;margin-right: 5px;}.bar-legend {list-style: none;}

javascript:// 柱状图数据var chartData = {// x轴显示的labellabels:['1月', '2月', '3月', '4月', '5月', '6月', '7月'],datasets:[{               fillColor:'#62a8ea',// 填充色              data:[60, 70, 80, 56, -40, 90, 58], // 数据               label:'月销售量' // 图例}]};// 柱状图选项设置var configs  = {scaleOverlay : false,  // 网格线是否在数据线的上面scaleOverride : false, // 是否用硬编码重写y轴网格线scaleSteps : null, //y轴刻度的个数scaleStepWidth : null, //y轴每个刻度的宽度scaleStartValue : null,  //y轴的起始值scaleLineColor : "rgba(0,0,0,.1)",// x轴y轴的颜色scaleLineWidth : 1,// x轴y轴的线宽  scaleShowLabels : true,// 是否显示y轴的标签scaleLabel : "<%=value%>",// 标签显示值scaleFontFamily : "'Arial'",// 标签的字体scaleFontSize : 12,// 标签字体的大小scaleFontStyle : "normal",// 标签字体的样式scaleFontColor : "#666",// 标签字体的颜色scaleShowGridLines : false,// 是否显示网格线scaleGridLineColor : "rgba(0,0,0,.05)",    // 网格线的颜色scaleGridLineWidth : 1, // 网格线的线宽scaleBeginAtZero: false, // y轴标记是否从0开始scaleShowHorizontalLines: true, // 是否显示横向线scaleShowVerticalLines: true, // 是否显示竖向线barShowStroke : true, // 是否显示线barStrokeWidth : 2,   // 线宽barValueSpacing : 5,// 柱状块与x值所形成的线之间的距离barDatasetSpacing : 1,// 在同一x值内的柱状块之间的间距animation : true,//是否有动画效果animationSteps : 60,//动画的步数animationEasing : "easeOutQuart",// 动画的效果showTooltips: 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 ctx = document.getElementById('bar').getContext('2d');var bar = new Chart(ctx).Bar(chartData, configs);var legend = document.getElementById('legend');// 图例legend.innerHTML = bar.generateLegend();

追加数据

bar.addData([30], '8月');

删除数据

柱状图中删除数据是从第一条数据开始的

bar.removeData();

修改labels中的某个值

bar.scale.xLabels[1] = 'February';bar.datasets[0].bars[1].label = 'February';bar.update();

修改某个数据

    bar.datasets[0].bars[1].value = 33;bar.update();

修改某个数据的填充色

要想修改每个柱状的填充色，则遍历所有的数据，修改每个数据的fillColor即可。
修改完填充色后要重新获取图例情报并设置。

    bar.datasets[0].bars[2].fillColor = '#f96868';bar.update();

修改图例以及填充色

bar.datasets[0].fillColor = '#926dde';
bar.datasets[0].label = '日剩余量';
var bars = bar.datasets[0].bars;
for(var i = 0; i < bars.length; i++) {bars[i].fillColor = '#926dde';bars[i].datasetLabel = '日剩余量';
}
bar.update();
legend.innerHTML = bar.generateLegend();

图表插件 - chart.js (柱状图) 学习总结相关推荐

HTML5——Canvas图表插件 chart.js的基础使用
Canvas图表插件推荐三种比较好用的. chart.js 灵活.可个性化设置图表样式的js图表插件 chartist.js 配置简单,只需要设置数据即可,包是最小的. HighCharts.js ...
数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area--(极地图) 极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异.当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表. ...
统计图表插件Chart.js（前端常用图表）
官方文档:https://chartjs.bootcss.com/docs/ 图表JS: <script src="Chart.js"></script> ...
chart.js使用学习——柱状图（1：基本用法)
柱状图属于以长方形的长度为变量的统计图表[1].chart.js创建图形的方式都类似,先是数据准备,然后在chart构造函数中指定图表类型. 如下列代码及效果图所示,chart类中将类型指定为 ...
chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
chart.js使用学习——折线图（1：基本用法)
折线图,即在直角坐标系中用直线串起来的一系列点形成的图形.在excel.ppt等办公软件中经常见到折线图,应用系统中也有不少统计汇总功能以折线图形式展示.本文根据参考文献1-2学习chart.js ...
微信小程序图表插件wxcharts.js使用小记，Echarts.js，推荐uCharts.js
一.wxcharts.js 参考地址:https://github.com/xiaolin3303/wx-charts/issues/58 参数含义参考:https://www.cnblogs.com ...
chart.js使用学习——散点图
之前介绍折线图时提到过,如果将数据集的showLine设为false,则绘制图形时只会绘制点,不会绘制点与点之间的连线,这其实就是散点图.chart.js中有单独绘制散点图的类型,即scatter ...
chart.js使用学习——雷达图
雷达图以二维形式综合对比多组数据的差异,常用于比较2组或更多组数据集[1].chart.js中雷达图的数据准备与其它图形相同,主要差异在于创建chart对象时,图形类型需指定为"rada ...

图表插件 - chart.js (柱状图) 学习总结

关于柱状图的绘制，追加、更新、删除数据等操作的总结

追加数据

删除数据

修改labels中的某个值

修改某个数据

修改某个数据的填充色

修改图例以及填充色

图表插件 - chart.js (柱状图) 学习总结相关推荐

最新文章

热门文章

图表插件 - chart.js (柱状图) 学习总结

关于柱状图的绘制，追加 、更新、删除数据等操作的总结

追加数据

删除数据

修改labels中的某个值

修改某个数据

修改某个数据的填充色

修改图例以及填充色

图表插件 - chart.js (柱状图) 学习总结相关推荐

最新文章

热门文章

关于柱状图的绘制，追加、更新、删除数据等操作的总结