时间戳

首页 > 解决方案 > 具有多个数据集重叠的 React chart2js 折线图

reactjs - 具有多个数据集重叠的 React chart2js 折线图

问题描述

图表

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对象构建的。data 引用的points变量是一个对象数组，例如：[{x: 0, y: 10257}, {x: 1, y: 10245}]

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

谢谢！

标签： reactjschart.jsreact-chartjs

解决方案

为了使对象表示法起作用，chart.js 需要值来绘制它们（而不是数组中的索引），因此您不能只提供一个仅包含 value 的数组l。

您可以提供一个标签数组，其中包含与它匹配的递增数字，或者将其删除并将 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>

推荐阅读