带空值的折线图:如何保持线连接

Line Chart with null values: How to keep Lines connected?

本文关键字：何保持 连接 空值 折线图      更新时间：2023-09-26

我使用Chart.js在我的网页上创建图表。现在我想创建与线和条形数据的组合图表。因为我的线和条数据是相互独立的，我需要使用空值。例如:

x-labels: 08:00, 09:00, 10:00, 11:00, 12:00
y-line: 12, null, 10, null, 15
y-bar: null, 25, null, 30, null

您可以以JsFiddle为例。正如您在这里看到的，线数据只是点，它们不与线相连。我想让这些点与直线相连。我怎么能做到?

尝试用'0'或尽可能小的值代替null值。

x-labels: 08:00, 09:00, 10:00, 11:00, 12:00
y-line: 12, 0, 10, 0, 15
y-bar: 0, 25, 0, 30, 0

无法处理null。

覆盖beforeDatasetsDraw 

Chart.pluginService.register({
    beforeDatasetsDraw: function(chart) {
        for (dataset of chart.config.data.datasets) {
            for(data of dataset._meta[chart.id].data) {
                data._model.skip = false;
                data._model.tension = 0;
            }
        } 
    }
});
相关文章：