javascript - Highcharts 空端点与图表边齐平

Question

我正在尝试将null端点连接到图表的两侧（左侧和右侧）。在下图中，我希望紫色线一直连接到图表的右侧。

紫色线的数据点是（倒序）：

data: [null,null,null,null,null,null,200,200,200,200,200,200,200,200,200,200,200,200,200,200]

我可以null通过使用connectNulls（如下所示）成功连接 s。请注意图表上，10/9 附近的蓝线上缺少 3 个点，并且这些点连接。

plotOptions: {
    series: {
        allowPointSelect: true,
        pointPlacement: "on",
        connectNulls: true
    }
},      

我也尝试过使用以下组合xAxis：

• minPadding
• maxPadding
• startOnTick
• endOnTick

以上都不起作用。是否有我忽略的 Highcharts 选项？或者如何使用自定义函数来完成？

Answer 1

尝试这个：

   //function for making own data set
   function makeDataSet(d) {   
        var l = d.length, i, isFirstNull = false;

        if(d[0] == null) {
           isFirstNull = true;
        }

         for(i = 0; i < l; i++) {
              if(isFirstNull) {
                 if(d[i] != null) {
                     d[0] = d[i];
                     isFirstNull = false;
                 }
              }
          }
        return d;

   }

      $(function () {

        var data1 = [null,null,null,null,null,null,200,200,200,200,200,200,200,200,200,200,200,200,200,200]; //data1

        var data2 = [100,100,null,null,null,null,20,20,20,20,20,20,20,20,20,20,20,20,20,20]; //data1

         makeDataSet(data1);
         makeDataSet(data2);

    $('#container').highcharts({
        chart: {
                type: 'spline'
        },
        xAxis: {
            reversed: true,
        },
        plotOptions: {
                series: {
                        allowPointSelect: true,
                        pointPlacement: "on",
                        connectNulls: true
                }
        },            
        series: [{
            name: 'Data 1',
            data: data1
        },
        {
            name: 'Data 2',
            data: data2
        }]
    });
});

看演示

Answer 2

要连接空点，空值应介于两个值之间，如下所示

data: [200,200,200,200,200,200,200,200,200,200,200,200,200,200,null,null,null,null,null,null,400]

然后它将通过空值连接 200 和 400。

在您的数据中，在 null 之后没有必要连接，因此无法继续。

试试吧，它会工作的