如何在Chart.js的折线图中添加空数据点？ [英] How to add an empty data point to a linechart on Chart.js?

问题描述

我正在尝试使用Chart.js在整个折线图中添加空数据点。我有这个：

  var data = {
标签：[
 1， 2 ， 3， 4， 5， 6， 7， 8， 9， 10 
]，
数据集：[
 { 
标签： Traffic，
数据：null，null，20、40，null，null，null，10、20，null 
} 
] 
} ; 
  

问题是，线图仅将前两个 null识别为空数据点，而不会不显示它们。但是，对于后面的空值，将显示一行（连接上一个和下一个有效数据点），这似乎使空数据点实际存在。有没有办法不在折线图中显示空值？ （类似于Canvas.js提供的功能：

带有 spanGaps的图表= true

I'm trying to add empty data points throughout a line chart using Chart.js. I have this:

var data = {
            labels: [
                "1","2","3","4","5","6","7","8","9","10"
            ],
            datasets: [
                {
                    label: "Traffic",
                    data: null,null,20,40,null,null,null,10,20,null
                }
            ]
        };

The problem is that the linechart only recognizes the first two "nulls" as being empty data points and doesn't display them. However, for the nulls that come after, a line (connecting the previous and next valid datapoint) is shown, which makes it seem as if the "null"-datapoints actually exist. Is there a way to NOT display null-values in linecharts? (Similar to what Canvas.js offer: http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/)

I read through the Chart.js documentation and stackoverflow but could not find an answer. Can anyone help me?

解决方案

I read line documentation and found a boolean option which is called spanGaps

Here's a piece of code, which i used to display this:

{
    'type': 'line',
    'data': {
        'labels': [1, 2, 3, 4, 5],

        'datasets': [{
            'label': 'example',
            'data': [4, 1, null, 3],

            // These are style properties, there is no need to copy them
            'borderColor': 'rgba(255,99,132,1)',
            'borderWidth': 1,
            'fill': false,
            tension: 0.2,
        }]
    },

    'options': {
        spanGaps: true // this is the property I found
     }
}

Chart with spanGaps = false:

Chart with spanGaps = true

这篇关于如何在Chart.js的折线图中添加空数据点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！