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++; 
    }); 
});