Question

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

high charts graph

紫色线的数据点是（按相反顺序）：

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

我可以使用null成功连接connectNulls（如下所示）。在图表上注意，在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
        }]
    });
});

见DEMO

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之后连接，因此无法继续。

尝试它会起作用

Highcharts null端点与图表边齐平

2 个答案: