如何创建一个图表，其中某些标签在 ChartJS 中没有值？

Question

我想在 ChartJS 中创建一个图表，显示随时间推移的进度。在我的数据库中，我只有进度更改日期的值和日期。所以像这样：

    "progress": {
        "07.02.2020": 0,
        "29.02.2020": 1,
        "07.04.2020": 2,
        "07.05.2020": 3,
        "07.07.2020": 4,
        "07.08.2020": 5,
        "07.09.2020": 6,
        "07.11.2020": 7,
        "07.12.2020": 8,
        "07.01.2021": 9,
        "07.02.2022": 10,
        "30.02.2022": 11
    }

我使用此脚本为 2020 年 2 月 7 日至 2022 年 2 月 30 日之间的每个日期添加标签：

function addDatesToChart(startDate, endDate) {
    const currentDate = new Date(startDate.getTime());
    console.log(currentDate);
    while (currentDate <= endDate) {
        chartData3.labels.push(new Date(currentDate).toLocaleDateString("et-EE", {year: "numeric", month: "2-digit", day: "2-digit"}));
        currentDate.setDate(currentDate.getDate() + 1);
    }
}

然后我使用此脚本将进度值添加到图表中，并使用最后一个进度条目的值填充空白：

let lastGivenProgress = 0;
let lastGivenProgressIndex = 0;
for (let i = 0; i < chartData.labels.length; i++) {
    if (!(Object.keys(progress).includes(chartData.labels[i]))) {
        chartData.datasets[0].data.push(lastGivenProgress);
    }
    else {
        chartData.datasets[0].data.push(Object.values(data)[lastGivenProgressIndex++]);
        lastGivenProgress = Object.values(progress)[lastGivenProgressIndex];
    }
}

问题是我希望线条有张力，但如果所有标签都有值，那么我就无法使用它，因此线条呈锯齿状：

我想知道是否有一种方法可以仅在某些索引处添加值并将其他标签留空，以便在进度发生变化的点之间绘制线条？所以就像这张图片中的红线一样（抱歉我的画太糟糕了）：

也许你有另一个建议，一种我没有想到的不同方法？

Answer 1

您尝试过使用

spanGaps

选项吗？ 如果您没有设置任何 Y 值，除非取得了进展，否则您的点之间应该存在差距。使用此功能，根据 chartjs 文档，它应该在带有数据的点之间绘制线条，例如：

var ctx = document.getElementById('myCanva').getContext('2d');

var config = {
  type:'line',
  data:{
    labels:[0,1,2,3,4,5,6,7,8,9],
    datasets:[{
      data:[1,2,5,null,9,null,null,15,null,20],
      label:'A'
    }]
  },
  options:{
    spanGaps:false,
  }
} 

var myChart = new Chart(ctx, config)


function spanGapsBtn(){
  config.options.spanGaps = !config.options.spanGaps
  myChart.update()
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<canvas id="myCanva"></canvas>
<button onClick = "spanGapsBtn()">Enable/Disable span Gaps</button>