如何在ChartJS中创建一些标签没有值的图表？

dnph8jn4 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(156)

我想在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];
    }
}

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

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

也许你有其他的建议，一个不同的方法，我还没有想到？

chart.js

来源：https://stackoverflow.com/questions/76911527/how-to-create-a-chart-where-some-labels-dont-have-a-value-in-chartjs

1条答案

按热度按时间

brjng4g31#

你试过使用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>

赞(0）回复(0）举报 2023-10-18

我来回答

如何在ChartJS中创建一些标签没有值的图表？

1条答案

相关问题

热门标签

最新问答