React chart2js折线图与多个数据集重叠

Question

chart

const data = {
    labels: Array(coordinates.length).fill("l"),
    datasets: buildDataset(),
    options: {
        animation: false,
        scales: {
            // ???????
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
               label: function(tooltipItem) {
                      return tooltipItem.yLabel;
               }
            }
        },
        maintainAspectRatio: false,
        scales: {
            myScale: {
                position: 'left',
            }
        },
        elements: {
            point:{
                radius: 0
            }
        }
    }
}
return (
        <Chart>
            <Line
            data={data}
            width={50}
            height={20}
            options={data.options}>
            </Line>
        </Chart>
)

// ~~~~~

     let obj = {
        label: stops[0].miles == 0 ? index : index + 1,
        data: points,
        backgroundColor: colors[index],
        tension: 0.4,
        fill: true
    }

这些图表是根据 obj 个对象的数组构建的。数据引用的 points 变量是一个对象数组，如：[{x: 0, y: 10257}, {x: 1, y: 10245}]

如何让我的折线图并排显示这些不同的数据集？我假设它与 scales 参数有关，但无法在文档中找到任何有用的东西。

谢谢！

Answer 1

要使对象符号起作用，chart.js 需要值来绘制它们（而不是数组中的索引），因此您不能只提供一个仅包含值 l.[=15 的数组=]

您可以提供一个标签数组，其中包含您匹配的递增数字，或者删除它并将您的 x 比例设置为线性。

标签示例：

var options = {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3],
    datasets: [{
        label: '# of Votes',
        data: [{
          x: 0,
          y: 4
        }, {
          x: 1,
          y: 6
        }, {
          x: 2,
          y: 2
        }],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [{
          x: 2,
          y: 2
        }, {
          x: 3,
          y: 3
        }],
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {}
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

线性示例：

var options = {
  type: 'line',
  data: {
    datasets: [{
        label: '# of Votes',
        data: [{
          x: 0,
          y: 4
        }, {
          x: 1,
          y: 6
        }, {
          x: 2,
          y: 2
        }],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [{
          x: 2,
          y: 2
        }, {
          x: 3,
          y: 3
        }],
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

React chart2js折线图与多个数据集重叠

React chart2js Line chart with multiple datasets overlapping

reactjs

chart.js

react-chartjs