散点图

散点图基于基本的折线图，但将 x 轴更改为线性轴。要使用散点图，数据必须以包含 X 和 Y 属性的对象形式传递。以下示例创建了一个包含 4 个点的散点图。

const config = { type: 'scatter', data: data, options: { scales: { x: { type: 'linear', position: 'bottom' } } } };

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};

const data = { datasets: [{ label: '散点图数据集', data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }], backgroundColor: 'rgb(255, 99, 132)' }], };

const data = {
  datasets: [{
    label: 'Scatter Dataset',
    data: [{
      x: -10,
      y: 0
    }, {
      x: 0,
      y: 10
    }, {
      x: 10,
      y: 5
    }, {
      x: 0.5,
      y: 5.5
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};

数据集属性

命名空间

• data.datasets[index] - 仅此数据集的选项
• options.datasets.scatter - 所有散点图数据集的选项
• options.elements.line - 所有 折线元素 的选项
• options.elements.point - 所有 点元素 的选项
• options - 整个图表的选项

散点图支持与 折线图 相同的所有属性。默认情况下，散点图将覆盖折线图的 showLine 属性为 false。

索引刻度类型为 linear。这意味着，如果您使用标签数组，则值必须是数字或可解析为数字，对象格式的键也是如此。

数据结构

与折线图可以以两种不同格式提供数据不同，散点图只接受点格式的数据。

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

内部数据格式

{x, y}