By lisr

更新日期:

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

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

    其中追加数据、删除数据、更新数据的操作都是在绘制完的曲面图的基础上实现的，折线图的实现和曲面图是一致的，
    只是把填充色改为透明色，将bezierCurve的值设置为false即可。

    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>line chart</title>
     	</head>
     	<body> 		
    	 	<div class="line-chart">
    	 		<h5 class="line-title">XX饮料营业额情况一览表</h5>
    	 		<canvas id="line" width=400 height=400></canvas>
    	 		<div id="legend"></div>
    	 	</div> 	
     	</body>
    	</html>

    css:

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

    .line-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
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
       var fillColor = ['rgba(255,255,255,0)','rgba(255,255,255,0)','rgba(255,255,255,0)'];
       var strokeColor = ['rgba(146,109,222,1)','rgba(87,199,212,1)','rgba(242,166,84,1)'];
       var bezierCurve = false;
       var legend = '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><%if(datasets[i].label){%>
                    <span style=\"background-color:<%=datasets[i].pointColor%>\"></span><%=datasets[i].label%><%}%></li><%}%></ul>';
       // 曲面图
       if (chartType == 'curve') {
           fillColor = ['rgba(146, 109, 222,0.5)','rgba(87,199,212,0.5)','rgba(242,166,84,0.5)']
           bezierCurve = true;
           legend = '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><%if(datasets[i].label){%>
                     <span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%=datasets[i].label%><%}%></li><%}%></ul>';
       }

       // 数据
       var chartData = {
               labels:['1月', '2月', '3月', '4月', '5月'],
               datasets : [
                   {
                       label: '图例1',
                       fillColor : fillColor[0],
                       strokeColor : strokeColor[0],
                       pointColor : strokeColor[0],
                       pointStrokeColor : '#fff',
                       data : [28, 24, 40, 19, 27]
                   },
                   {
                       label: '图例2',
                       fillColor : fillColor[1],
                       strokeColor : strokeColor[1],
                       pointColor : strokeColor[1],
                       pointStrokeColor : '#fff',
                       data : [123, 132, 146, 118, 189]
                   },
                   {
                       label: '图例3',
                       fillColor : fillColor[2],
                       strokeColor : strokeColor[2],
                       pointColor : strokeColor[2],
                       pointStrokeColor : '#fff',
                       data : [201, 232, 256, 215, 278]
                   }
               ]
           };

           // 属性设置
           var configs = {
               scaleOverlay : false,  // 网格线是否在数据线的上面
               scaleOverride : false, // 是否用硬编码重写y轴网格线
               scaleSteps : null, //y轴刻度的个数
               scaleStepWidth : null, //y轴每个刻度的宽度
               scaleStartValue : null,  //y轴的起始值
               scaleLineColor : "rgba(0,0,0,.5)",// x轴y轴的颜色
               scaleLineWidth : 1,// x轴y轴的线宽
               showTooltips: false, // 是否显示提示
               scaleShowLabels: true, // 是否显示y轴的标签
               scaleLabel : "<%=value%>",// 标签显示值
               scaleFontFamily : "'Arial'",// 标签的字体
               scaleFontSize : 12,// 标签字体的大小
               scaleFontStyle : "normal",// 标签字体的样式
               scaleFontColor : "#666",// 标签字体的颜色
               scaleShowGridLines: false, // 是否显示网格线
               scaleGridLineColor : "rgba(0,0,0,.05)",  // 网格线的颜色
               scaleGridLineWidth : 1, // 网格线的线宽
               scaleBeginAtZero: true, // y轴的标签是否从0开始
               bezierCurve: bezierCurve, // 是否是曲线
               legendTemplate : legend,
               pointDot : true, //是否显示点
               pointDotRadius : 3, //点的半径
               pointDotStrokeWidth : 1,//点的线宽
               // 动画结束后显示对应的数据
               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.points.forEach(function (point, index) {
                           if (index==0) {
                               ctx.fillText(point.value, point.x + 10, point.y - 5);
                           } else if(index == dataset.points.length -1){
                               ctx.fillText(point.value, point.x - 10, point.y -5);
                           } else {
                                ctx.fillText(point.value, point.x, point.y - 5);
                           }
                       });
                   });
               }
           };

       // 开始绘制饼状图
    var ctx = document.getElementById('line').getContext('2d');
    var line = new Chart(ctx).Line(chartData, configs);
    var legend = document.getElementById('legend');
    // 图例
    legend.innerHTML = line.generateLegend();
    效果如图

    如图1

    追加数据

    1
    line.addData([100, 49, 200], '6月');
    效果如图

    如图2

    删除数据

    曲面图中删除数据默认是从第一条数据开始的。

    1
    2
    3
    4
    5

    // 删除开头（1月）数据
    line.removeData();
    line.update();
       legend.innerHTML = line.generateLegend();
    效果如图

    如图3

    修改x轴labels中的某个值

    1
    2
    3
    4
    5
    6
    7
    8

    // 将2月=>February
       line.scale.xLabels[1] = 'February';    
       line.datasets.forEach(function(dataset){
           dataset.points[1].label = 'February';
       });

       line.update();
    效果如图

    如图4

    修改某个数据

    1
    2
    3
    4

    // 将图例1的3月的数据[40]修改为[100]
       line.datasets[0].points[2].value = 100;
       line.update();
    效果如图

    如图5

    修改某个图例的填充色

    如果是折线图，修改折线的颜色，修改[strokeColor]属性和[pointColor]属性的值即可，[fillColor]属性的值保持不变。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    // 修改图例3的填充色
       line.datasets[2].fillColor = 'rgba(255,0,153,0.2)';
       line.datasets[2].pointColor = 'rgba(255,0,153,1)';
       line.datasets[2].points.forEach(function(point){
           point.fillColor = 'rgba(255,0,153,0.6)';
       });

       line.update();
       legend.innerHTML = line.generateLegend();
    效果如图

    如图6

    修改某个图例的名称

    1
    2
    3
    4
    5
    6
    7
    8
    9

    // 图例2 => 可口可乐销售量
    line.datasets[1].label = '可口可乐销售量';
    line.datasets[1].points.forEach(function(point){
        point.datasetLabel = '可口可乐销售量';
    });

    line.update();
    legend.innerHTML = line.generateLegend();
    效果如图

    如图7

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