ChartJS 如何在海图上使两个不同的坐标轴沿着公共坐标轴相交?

yqlxgs2m  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(172)

假设我们有2个不同的数据集,如:

{
  name: "Voltage",
  samplingTime: 0.1,
  data: [
    3598.599878, 
    3598.595369, 
    3598.580042,
    ...]
}

{
  name: "Velocity",
  samplingTime: 0.1,
  data: [
    0.01, 
    0.03, 
    0.06,
    ...]
}

假设它们有共同的时间(x)轴。我设法用两个Y轴和时间轴显示数据。我想做的是沿着这个共同的时间轴相交这两个(速度和电压)轴。所以我想电压是X轴,速度是Y轴,我不想显示时间轴。我如何才能做到这一点?
我的addData函数如下所示:

this.data.datasets = datas.map((data, i) => ({
        label: data.name,
        data: data.data,
        backgroundColor: bgColors[i],
        borderColor: borderColors[i],
        borderWidth: 1,
        yAxisID: data.name,
        xAxisID: "Time"
      }));

注意:我尝试更改数据集的yAxisID和xAxisID,但找不到解决方案

5ssjco0h

5ssjco0h1#

要将两个数据集用作单独的轴,只需按如下方式Map数据:

data : [
  {x:3598.599878, y:0.01},
  {x:3598.595369, y:0.03},
  {x:3598.580042, y:0.06},
  ...
]

然后在选项中,确保X轴类型为linear

options : {
  scales:
    {x:
      { type:'linear', ...}
    }
}

这是因为X轴类型默认为category,而您的两个数据集都是数值型的,所以Map后最终只有一个数据集,您可以将图表类型设置为linebarscatter

相关问题