Chart.js

Question

我正在使用 ChartJs 来展示一些关于运动员举重进步的图表。

在 x-axis 我有训练日期，在 y-axis 我有公斤的不同练习（5 行）。尽管并非所有练习都在一次训练日完成。因此，对于这个特定日期，我的练习线变为零（当我在训练中找不到练习时，我将 0 放入图表的数据 json）。

是否有针对此特定日期的解决方案，即完全删除此行的点并避免我的行变为零？当我没有数据时=>不显示任何点。

例如，您可以在 27/06/2021 看到橙色点，蓝色练习根本不存在。我想避免线下降到零。

标签和数据就是这样

数据：[65、59、80、81、56、55、40]

标签：[“20/01/2020”、“21/01/2020”.....]

.

Answer 1

是的，如果您不希望点显示，您可以使用脚本选项，您也可以传递 null 值以便跳过该点，或者您可以使用对象格式指定数据点的标签需要匹配：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Scriptable radius',
        data: [12, 19, 0, 5, 2, 3],
        borderColor: 'pink',
        backgroundColor: 'pink',
        radius: (ctx, a, b) => (ctx.parsed.y === 0 ? 0 : 8)
      },
      {
        label: 'Null value',
        data: [7, 11, null, 8, 3, 7],
        borderColor: 'orange',
        backgroundColor: 'orange'
      },
      {
        label: 'Object notation',
        data: [{
          x: 'Red',
          y: 6
        }, {
          x: 'Blue',
          y: 4
        }, {
          x: 'Green',
          y: 8
        }, {
          x: 'Purple',
          y: 12
        }, {
          x: 'Orange',
          y: 3
        }, ],
        borderColor: 'lime',
        backgroundColor: 'lime'
      }
    ]
  },
  options: {}
}

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.1/chart.js"></script>
</body>

Chart.js - 避免线变为零并在这种情况下删除点

Chart.js - Avoid line to goes to zero and remove dot for this situation

linechart