ChartJS 不根据 x 轴数据渲染线条

Question

资料：

const data={
  "labels": [
    0,  
    400,
      800,
      1200,
      1600,
      2000,
      2400,
      2800,
      3200,
      3600,
      4000
  ],
  "datasets": [
    {
      "axis": 'x',
      "label": "FFF",
      "borderColor": "Red",
      "backgroundColor": "Red",
      "data": [
          {
              "x": 2883,
              "y": 129
          },
          {
              "x": 3509,
              "y": 118
          },
          {
              "x": 3916,
              "y": 73
          }
      ]
  }
  ]
};

图表：

我同时提供 x 和 y 轴值，红线的结果应该是这样的。 但是对于当前配置，它从开始渲染线而不是 x 轴上的特定点。

Answer 1

对于这个结果，您必须使用

scatter chart

和

showline : true

选项而不是

line chart

。

//your code

const data={
  "labels": [
    0,  
    400,
      800,
      1200,
      1600,
      2000,
      2400,
      2800,
      3200,
      3600,
      4000
  ],
  "datasets": [
    {
      "axis": 'x',
      "label": "FFF",
      "borderColor": "Red",
      "backgroundColor": "Red",
      "showLine": true,         //add this option to connect dots of scatterred points
      "data": [
          {
              "x": 2883,
              "y": 129
          },
          {
              "x": 3509,
              "y": 118
          },
          {
              "x": 3916,
              "y": 73
          }
      ]
  }
  ]
};

<Scatter data={data} />

Answer 2

这是因为您使用的是默认配置的折线图。

默认情况下，折线图使用类别比例并需要字符串。在你指定一个 x 的数据集中，这个 x 是内部数据格式，对于分类尺度来说不是值而是索引。

最简单的方法是通过将

options.scales.x.type

设置为

'linear'

来使用线性刻度