By lisr

更新日期:

文章目錄
  1. 1. 效果如图
  • 追加数据
    1. 1. 效果如图
  • 删除数据
    1. 1. 效果如图
  • 修改labels中的某个值
    1. 1. 效果如图
  • 修改某个数据
    1. 1. 效果如图
  • 修改某个数据的填充色
    1. 1. 效果如图
  • 修改图例
    1. 1. 效果如图

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

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

    html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .bar-legend li span {
        width: 1em;
        height: 1em;
        display: inline-block;
        margin-right: 5px;
    }

    .bar-legend {
        list-style: none;
    }

    javascript:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
     	// 柱状图数据
    var chartData = {
    	// x轴显示的label
    	labels:['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();
    效果如图

    Alt bar

    追加数据

    1
    bar.addData([30], '8月');
    效果如图

    Alt bar

    删除数据

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

    1
    2

    bar.removeData();
    效果如图

    Alt bar

    修改labels中的某个值

    1
    2
    3
    4

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

    Alt bar

    修改某个数据

    1
    2
    bar.datasets[0].bars[1].value = 33;
    bar.update();
    效果如图

    Alt bar

    修改某个数据的填充色

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

    1
    2
    bar.datasets[0].bars[2].fillColor = '#f96868';
    bar.update();
    效果如图

    Alt bar

    修改图例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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();
    效果如图

    Alt bar

    文章目錄
    1. 1. 效果如图
  • 追加数据
    1. 1. 效果如图
  • 删除数据
    1. 1. 效果如图
  • 修改labels中的某个值
    1. 1. 效果如图
  • 修改某个数据
    1. 1. 效果如图
  • 修改某个数据的填充色
    1. 1. 效果如图
  • 修改图例
    1. 1. 效果如图
    • Fork me on GitHub