使用 chart.js 在 x 和 y 轴上为重复数据绘制多个点的折线图答案

【问题标题】：Line chart plotting multiple points for duplicate data on x and y axis using chart.js使用 chart.js 在 x 和 y 轴上为重复数据绘制多个点的折线图
【发布时间】：2021-07-14 12:08:11
【问题描述】：

我是 angular8 应用程序的初学者并使用 chart.js 版本 ^2.9.3，我根据以下数据创建了一个图表。使用我拥有的数据创建折线图的代码示例：

    const labels = [65, 65, 80, 80, 56, 55, 40]
    const data = {
      labels: labels,
      datasets: [{
        label: 'My First Dataset',
        data: [67, 67, 81, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    };

我从 chartjs.org 上给出的示例中提取了示例折线图参考，并修改了我从数据库中获取的重复数据类型。

我想为重复的 x 轴和 y 轴值获取一个点，而不是创建多个点，我该如何在折线图中做到这一点？

我已附上示例供参考。

【问题讨论】：

标签： javascript angular charts chart.js chart.js2

【解决方案1】：

您可以做的最好的事情是通过从数据数组中删除重复值来预先操作您的数据，您可以使用的另一个选项是对象表示法与线性 x 轴相结合，这仍然会绘制双倍点但是它会把它放在同一个地方

var options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 79,
        y: 80
      }, {
        x: 80,
        y: 81
      }, {
        x: 80,
        y: 81
      }, {
        x: 81,
        y: 77
      }],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        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/2.9.4/Chart.js"></script>
</body>

【讨论】：

嗨 LeeLenalee，感谢您抽出时间，但您能帮我如何将动态数据绑定到 x、y 坐标，这只是静态数据的示例。
嗨@LeeLenalee 我想将数据和标签绑定为数字列表而不是静态数据，它将是动态列表，你能帮我吗？
谢谢@LeeLenalee，我得到了参考，我可以在折线图中做到这一点，我怎样才能在条形图中实现同样的目标？