Highcharts - 仅显示选定的点

Question

我想要一条只显示选定点的线（它们实际上会被预先选定）。

在这个例子中 - http://jsfiddle.net/jhG8j/ - 当你点击按钮时，你可以显示选定的点，但是如果所有其他点已经显示（标记：启用），我只能让它工作。有没有一种方法可以用简单的线条开始，然后只显示选定的点？

下面是从的jsfiddle相关代码：

$(function() { 
$('#container').highcharts({ 
    plotOptions: { 
     line: { 
      marker: { 
       enabled: true 
      } 
     } 
    }, 
    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 
}); 

// button handler 
var chart = $('#container').highcharts(), 
    i = 0; 
$('#button').click(function() { 

    if (i == chart.series[0].data.length) { 
     i = 0; 
    } 
    chart.series[0].data[i].select(true, true); 
    i++; 
}); 

}）;

Answer 1

你可以通过创建两个单独的系列来摆脱这种情况。为了使您的系列看起来像是一个折线图，您需要在您的数据中添加一些空值，并确保第一个系列的最后一个数据点是以下系列的第一个数据点。

使用您所提供的的jsfiddle，更新的代码如下：

$(function() { 
    $('#container').highcharts({ 
     plotOptions: { 
      line: { 

      } 
     }, 
     series: [{ 
      data: [29.9, 71.5, 106.4] , 
      marker: { 
       enabled: true 
      } , 
      color: '#000000' 
     },{ 
      data: [null, null , 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] , 
      marker: { 
       enabled: false , 
       states: { 
        hover: { 
         enabled: false 
        } , 
        states: { 
         select: false 
        } 
       } 
      }, 
      color: '#000000' 
     }] 
    }); 

    // button handler 
    var chart = $('#container').highcharts(), 
     i = 0; 
    $('#button').click(function() { 

     if (i == chart.series[0].data.length) { 
      i = 0; 
     } 
     chart.series[0].data[i].select(true, true); 
     i++; 
    }); 
});