Chart.js - 在这种情况下避免行归零并删除点答案

【问题标题】：Chart.js - Avoid line to goes to zero and remove dot for this situationChart.js - 在这种情况下避免行归零并删除点
【发布时间】：2021-08-20 13:39:27
【问题描述】：

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

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

对于这个特定日期是否有解决方案完全删除这条线的点并避免我的线变为零？当我没有数据时 => 不显示任何点。

例如，您可以在 2021 年 6 月 27 日看到橙色点，蓝色练习根本不存在。我想避免将行降为零。

标签和数据就是这样的

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

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

【问题讨论】：

标签： chart.js linechart

【解决方案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 版本，所以现在我的选项属性有一些问题......
此处描述了 V2 和 V3 之间发生的所有更改，以便您可以正确调整选项对象：chartjs.org/docs/master/getting-started/v3-migration.html