Chart.js插件使用的笔记

简单介绍

Chart.js是一款UI统计图插件，我在使用它的bar chart和line chart和scatter chart的时候遇到了一些问题，Chart.js官网的doc/sample手册不详细，搜索结果不准确，没有论坛讨论（如图1所示），只好自己去bing上搜搜，国内的搜索很难搜索到，在国际版bing上搜索到了有用的解决方法，stackoverflow论坛上的讨论更详细

下面我将自己使用Chart.js遇到的问题、解决思路和解决方案分享给大家（其实是stack overflow讨论帖子的搬运工～）

坐标轴的名字

• 搜索关键词：chart.js\aixs\label
• stackoverflow讨论帖：https://stackoverflow.com/questions/27910719/in-chart-js-set-chart-title-name-of-x-axis-and-y-axis
• 解决code：在chart.js 2.0版本中，给坐标轴设置label的方法是

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'probability'
      }
    }]
  }     
}

• 思考：如果搜索关键词换成chart.js/xlabel/title等，找不到解决方法

图例的位置

• 搜索关键词：chart.js\legend\position
• stackoverflow讨论帖：https://stackoverflow.com/questions/59213088/chartjs-pie-legend-position#:~:text=ChartJs%20pie%20have%204%20default%20positions%20form%20legends%3A,a%20little%20sample%20of%20default%20legend%20style%3A%20https%3A%2F%2Fcodepen.io%2Feduardodos%2Fpen%2FxxbwGpN
• 解决code：设置option选项中的legend属性

options: {
    legend: {
      position: 'bottom'
    }
  }

• 思考：chart.js的图例属性是label，受到它的误导，我一直在搜索引擎中搜索chart.js label position，搜索出的结果完全不能用，换成legend之后，能搜索到图例位置属性
• 官网doc手册：https://www.chartjs.org/docs/latest/configuration/legend.html
  

多条线画在同一幅图中

• 搜索关键词：Chart.js/multi line/multi labels
• stack overflow讨论帖：https://stackoverflow.com/questions/49489670/chart-js-displaying-multiple-line-charts-using-multiple-labels，帖子里描述了一种应用情形：

Char1的x和y数据分别是：

1 -> 2
2 -> 4
3 -> 8
4 -> 16

Chart2的x和y数据分别是：

1 -> 3
3 -> 4
4 -> 6
6 -> 9

两个Chart的x值不同，采用line chart只能设置一组x值，也就是chart中的label值

• 解决code：使用scatter类型图并将showLine设置成true，而不是使用line类型的图设置label

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
    	{
        label: 'Chart 1',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
    	},
      {
        label: 'Chart 2',
        data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(200, 0, 0, 1)'
    	}
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

• 思考：一直在line chart中兜圈子，不得不说有时候要考虑考虑其它的图，官网上这样描述scatter chart和line chart
  scatter chart支持line chart的全部属性
  

获取JSON数据

• 参考链接：https://blog.csdn.net/u013201439/article/details/72794408
  或者http://microbuilder.io/blog/2016/01/10/plotting-json-data-with-chart-js.html#loading-json-data-with-jquery
• 解决方法：chart.js不同于ApexChart，ApexChart自带了UpdateSeries函数，函数中调用 $.getJSON()方法，将JSON数据传入到ApexChart，chart.js没有自带的函数属性，只能用$.ajax()方法，经过它的启发，也能用$.getJSON()方法，方法中传入数据并初始化chart
• 思考：获取JSON数据的功能在chart.js官网上没有讨论和说明，显得不够友好
• 搜索关键词：$.getJSON()/chart.js
• stack overflow讨论贴：https://stackoverflow.com/questions/55278747/mapping-data-from-getjson-response-in-chart-js
• 解决code：chart.js中的创建图函数和$.getJSON()是分开的，labels和data变量在$.getJSON()外部没有定义，自然不能成功创建chart，那么在done()里面获取JSON数据的同时，将获取的JSON数据转换成chart.js能够识别的labels和data，调用创建图的函数

$.getJSON('file.json').done( function (results) {  

        var labels = [];
        var data = [];

        var labels = results.map(function (item) {
            return item.updatedLabels
        });

        var data = results.map(function (item) {
            return item.updatedData;
        });

        // Create chart
        createChart(labels, data);

});

function createChart(labels, data) {
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Example',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
            }]
        },
    });

}