Chartjs 初体验

I 官网

https://www.chartjs.org/

https://chartjs.bootcss.com/ 中文网址

简单易上手，支持的Chart 类型：折线图，饼图，柱状，雷达图，网状图 基本遇到的图都支持

操作步骤：

1 引用chartjs 测试使用cdn

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2 创建Chart显示的画布Canvas 设置ID

<canvas id="myChart"></canvas>

3 配置参数，如下主要分为三个部分：

const config = {
  type: 'line',//线图
  data: data,//用来配置显示在图上的数据信息，点的坐标信息
  options: {}//可选参数 常用的配置有responsive 自适应 legend用来配置是否显示图例 自定义横坐标，纵坐标显示刻度等
};
const data = {
        datasets: [{
            label: 'cpu',
            data: [
                { Dt: '2021-10-10', rate: 40 }, { Dt: '2021-10-11', rate: 43 }, { Dt: '2021-10-12', rate: 60 },
                { Dt: '2021-10-13', rate: 54 }, { Dt: '2021-10-14', rate: 38 }, { Dt: '2021-10-15', rate: 64 },
                { Dt: '2021-10-16', rate: 46 },],
            parsing: { yAxisKey: 'rate', xAxisKey: 'Dt' }
        }
        ]
    };
    const option= { }
    const config = { type: 'line', data: data, Option: option };

　

4 加载Chart图表，const myChart = new Chart(element,config);

const myChart = new Chart(document.querySelector("#myChart"), config);

　　

5 以折线图为例,添加点击事件，获取点的坐标信息

document.querySelector("#myChart").onclick = function (evt) {
        const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
        //console.log(evt);
        console.log(points);
        // => activePoints is an array of points on the canvas that are at the same position as the click event.
        if (points.length) {
            const firstPoint = points[0];
            const label = myChart.data.labels[firstPoint.index];
            const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index].Dt;
            console.log(`${label} --- ${value}`);//横坐标---纵坐标
        }
    };

更多属性建议大家访问官网，链接： Getting Started | Chart.js (chartjs.org)

以下附上自己写的一个demo:线图添加Click事件,控制台输出click点的坐标

引用js

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

html代码

<canvas id="myChart"></canvas>

javascript 实现

const data = {
        datasets: [{
            label: 'cpu',
            data: [
                { Dt: '2021-10-10', rate: 40 }, { Dt: '2021-10-11', rate: 43 }, { Dt: '2021-10-12', rate: 60 },
                { Dt: '2021-10-13', rate: 54 }, { Dt: '2021-10-14', rate: 38 }, { Dt: '2021-10-15', rate: 64 },
                { Dt: '2021-10-16', rate: 46 },],
            parsing: { yAxisKey: 'rate', xAxisKey: 'Dt' }
        }
        ]
    };
    const option= { }
    const config = { type: 'line', data: data, Option: option };

    const myChart = new Chart(document.querySelector("#myChart"), config);　　
    document.querySelector("#myChart").onclick = function (evt) {　　　　　　
        const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);　　　　　　
        console.log(points);　　　　　　
        if (points.length) {　　　　　　
            const firstPoint = points[0];　　　　　　
            const label = myChart.data.labels[firstPoint.index];　　　　　　
            const value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index].Dt;　　　　　　			   console.log(`${label} --- ${value}`);//横坐标---纵坐标　　　　　　
        }　　　　
    };

chart加载之后如果要修改图表数据：

myChart.data.datasets[0].data = obj;
myChart.update();