数据可视化清新版【chart.js】学习笔记10.0—离散图(Scatter Chart)

本文链接：https://blog.csdn.net/qq_36288559/article/details/112370040

Scatter Chart——（离散图）

散点图基于基本折线图，x 轴更改为线性轴。要使用散点图，数据必须作为包含 X 和 Y 属性的对象传递。下面的例子创建了一个 3 点的散点图。
官方文档：https://www.chartjs.org/docs/latest/charts/scatter.html

用法示例
var myBubbleChart = new Chart(ctx, {
type: ‘scatter’,
data: data,
options: options
});

图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）

散点图支持与折线图(line chart)相同的所有属性。

样例

let ctx = document.getElementById("myChart8");
let myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
        label: '# of Votes',
        fill:false,
        data: [
            {
              x: -8,
              y: 10
            },
            {
              x: 0,
              y: 9
            },
            {
              x: 8,
              y: 8
            },
            {
              x: 0,
              y: 7
            },
            {
              x: -6,
              y: 6
            },
            {
              x: 0,
              y: 5
            },
            {
              x: 6,
              y: 4
            },
            {
              x: 0,
              y: 3
            },
            {
              x: -4,
              y: 2
            }
        ],
        backgroundColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(255, 99, 132, 0.9)',
              'rgba(255, 99, 132, 0.8)',
              'rgba(255, 99, 132, 0.7)',
              'rgba(255, 99, 132, 0.6)',
              'rgba(255, 99, 132, 0.5)',
              'rgba(255, 99, 132, 0.4)',
              'rgba(255, 99, 132, 0.3)',
              'rgba(255, 99, 132, 0.2)',
        ],
        borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(255, 99, 132, 0.9)',
              'rgba(255, 99, 132, 0.8)',
              'rgba(255, 99, 132, 0.7)',
              'rgba(255, 99, 132, 0.6)',
              'rgba(255, 99, 132, 0.5)',
              'rgba(255, 99, 132, 0.4)',
              'rgba(255, 99, 132, 0.3)',
              'rgba(255, 99, 132, 0.2)',
        ],
        borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [
                {
                   type: "linear",
                   position: "bottom"
                }
            ]
        }
    }
});