为 highcharts 中的缺失数据设置零答案

【问题标题】：Set zero for missing data in highcharts为 highcharts 中的缺失数据设置零
【发布时间】：2017-09-08 08:16:50
【问题描述】：

如何将 highcharts 中的缺失数据设置为零，这里我得到了 3 天的值，天之间的数据不存在。因此，在那些日子里，我需要设置为零

seriesData = [{
    "name": "Questions",
    "data": [
      [1503273600000,1],
      [1504656000000,1],
      [1504742400000,1]
    ]
  }]

Jsfiddle

谢谢...

【问题讨论】：

查看您提供的示例，缺少哪些数据？
@MattNewelski 只有我得到 3 天的值，天之间的数据不存在。因此，在那些日子里，我需要设置零
如果不将丢失的数据推送到数据数组中，我认为您无法做到这一点。
您必须对数据进行预处理。图表不知道您认为“缺失”的数据是什么——您必须自己定义，并在将数据发送到图表之前填补空白。例如。如果你每天都需要一个数据点，你需要定义你的开始和结束日期，循环遍历这些日期，如果没有找到数据点，则为该日期添加一个值为 0 的数据点。

标签： javascript highcharts

【解决方案1】：

你可以这样做

var data = [[1.5032736E12,1.0],[1.504656E12,1.0],[1.5047424E12,1.0]];
        var startDay = data[0][0],
            endDay = data[data.length-1][0]
            isLastDay = startDay == endDay,
            dayTick = 1000 * 60 * 60 * 24,
            temp = [];

        //Create new array with 0 values for each day
        temp.push([startDay, 0])
        while(!isLastDay) {
            startDay += dayTick;
            temp.push([startDay, 0])

            isLastDay = startDay >= endDay;
        }

        //Override all values with existing days
        for (var i = 0; i < data.length; i++)
        for(var j = 0; j < temp.length; j++) {
            if (temp[j][0] == data[i][0]) {
                temp[j][1] = data[i][1];
                break;
            }
        }

    data = temp;

Highcharts.chart('container', {
chart: {
            type: 'line'
        },
   title: {
            text: 'Survey'
        },
        yAxis: {
            title: {
                text: 'Responses'
            }
        },
        xAxis: [{
            type: "datetime",
            title: {
                text: null
            },
            dateTimeLabelFormats: {
                month: "%e.%b<br/>%a"
            }
        }],
           plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            },
            series: {
                connectNulls: true
            }
        },

    series:[{"name":"Questions","data":data}]

});

通过这种方式，您将创建一个新的临时数组，该数组将在第一天和最后一天之间的所有天都包含 0 值，然后您只需将现有值放入临时数组中。

这是更新后的jsfiddle

【讨论】：

【解决方案2】：

Highcharts 没有开箱即用的功能。您需要在绘制之前将缺失的点推入数组中。

你可以像这样使用一个简单的函数。给定的函数是用 typescript 编写的，您可以根据自己的用途对其进行调整。

generateDataSet(data: number[][]): number[][] {
    const temp: number[][] = [];
    data.forEach((d: number[], index) => {
        d[0] *= 1000;
        if (index !=0) {
            if (d[0] - dayTick === data[index - 1][0]) {
                temp.push(d);
            } else {
                let lb = data[index - 1][0];
                const ub = d[0];
                while (lb != ub) {
                    lb += dayTick;
                    temp.push([lb, 0]);
                }
            }
        } else {
            temp.push(d);
        }
    });
    return temp;
}

您绝对可以改进答案，因为总是有改进的余地。到那时继续编码。

这是一个工作演示 highcharts-jsfiddle-example。

【讨论】：