將highcharts數據標籤設置爲下拉列表

Question

可以將datalabel設置爲下拉菜單列表嗎？

問題出現在我的圖表上有超過六個標籤時，它們從容器溢出。

Answer 1

您想僅顯示用於通過下拉菜單選擇的一個系列的點的dataLabels？在這種情況下，簡單地用正確的選項更新系列：http://jsfiddle.net/qwPQj/1/

$('#container').highcharts({ 
     chart: { 
      type: 'spline' 
     }, 
     title: { 
      text: 'Various point on range year' 
     }, 
     subtitle: { 
      text: 'Example of Highcharts JS' 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { 
       month: '%e. %b', 
       year: '%b' 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'BOND' 
      }, 
      min: 0 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m'; 
      } 
     }, 

     series: [{ 
      name: 'Test1',     
      data: [ 
       [Date.UTC(1970, 9, 27), 0 ], 
       [Date.UTC(1970, 10, 10), 0.6 ], 
       [Date.UTC(1970, 10, 18), 0.7 ], 
       [Date.UTC(1970, 11, 2), 0.8 ], 
       [Date.UTC(1970, 11, 9), 0.6 ], 
       [Date.UTC(1970, 11, 16), 0.6 ], 
       [Date.UTC(1970, 11, 28), 0.67], 
       [Date.UTC(1971, 0, 1), 0.81], 
       [Date.UTC(1971, 0, 8), 0.78], 
       [Date.UTC(1971, 0, 12), 0.98], 
       [Date.UTC(1971, 0, 27), 1.84], 
       [Date.UTC(1971, 1, 10), 1.80], 
       [Date.UTC(1971, 1, 18), 1.80], 
       [Date.UTC(1971, 1, 24), 1.92], 
       [Date.UTC(1971, 2, 4), 2.49], 
       [Date.UTC(1971, 2, 11), 2.79], 
       [Date.UTC(1971, 2, 15), 2.73], 
       [Date.UTC(1971, 2, 25), 2.61], 
       [Date.UTC(1971, 3, 2), 2.76], 
       [Date.UTC(1971, 3, 6), 2.82], 
       [Date.UTC(1971, 3, 13), 2.8 ], 
       [Date.UTC(1971, 4, 3), 2.1 ], 
       [Date.UTC(1971, 4, 26), 1.1 ], 
       [Date.UTC(1971, 5, 9), 0.25], 
       [Date.UTC(1971, 5, 12), 0 ] 
      ] 
     }, { 
      name: 'Test2', 
      data: [ 
       [Date.UTC(1970, 9, 18), 0 ], 
       [Date.UTC(1970, 9, 26), 0.2 ], 
       [Date.UTC(1970, 11, 1), 0.47], 
       [Date.UTC(1970, 11, 11), 0.55], 
       [Date.UTC(1970, 11, 25), 1.38], 
       [Date.UTC(1971, 0, 8), 1.38], 
       [Date.UTC(1971, 0, 15), 1.38], 
       [Date.UTC(1971, 1, 1), 1.38], 
       [Date.UTC(1971, 1, 8), 1.48], 
       [Date.UTC(1971, 1, 21), 1.5 ], 
       [Date.UTC(1971, 2, 12), 1.89], 
       [Date.UTC(1971, 2, 25), 2.0 ], 
       [Date.UTC(1971, 3, 4), 1.94], 
       [Date.UTC(1971, 3, 9), 1.91], 
       [Date.UTC(1971, 3, 13), 1.75], 
       [Date.UTC(1971, 3, 19), 1.6 ], 
       [Date.UTC(1971, 4, 25), 0.6 ], 
       [Date.UTC(1971, 4, 31), 0.35], 
       [Date.UTC(1971, 5, 7), 0 ] 
      ] 
     }, { 
      name: 'Test 3', 
      data: [ 
       [Date.UTC(1970, 9, 9), 0 ], 
       [Date.UTC(1970, 9, 14), 0.15], 
       [Date.UTC(1970, 10, 28), 0.35], 
       [Date.UTC(1970, 11, 12), 0.46], 
       [Date.UTC(1971, 0, 1), 0.59], 
       [Date.UTC(1971, 0, 24), 0.58], 
       [Date.UTC(1971, 1, 1), 0.62], 
       [Date.UTC(1971, 1, 7), 0.65], 
       [Date.UTC(1971, 1, 23), 0.77], 
       [Date.UTC(1971, 2, 8), 0.77], 
       [Date.UTC(1971, 2, 14), 0.79], 
       [Date.UTC(1971, 2, 24), 0.86], 
       [Date.UTC(1971, 3, 4), 0.8 ], 
       [Date.UTC(1971, 3, 18), 0.94], 
       [Date.UTC(1971, 3, 24), 0.9 ], 
       [Date.UTC(1971, 4, 16), 0.39], 
       [Date.UTC(1971, 4, 21), 0 ] 
      ] 
     }, 
     { 
      name: 'Test 4', 
      data: [ 
       [Date.UTC(1970, 9, 9), 0 ], 
       [Date.UTC(1970, 9, 14), 0.75], 
       [Date.UTC(1970, 10, 28), 0.35], 
       [Date.UTC(1970, 11, 12), 0.46], 
       [Date.UTC(1971, 0, 1), 0.59], 
       [Date.UTC(1971, 0, 24), 0.58], 
       [Date.UTC(1971, 1, 1), 0.62], 
       [Date.UTC(1971, 1, 7), 0.65], 
       [Date.UTC(1971, 1, 23), 0.77], 
       [Date.UTC(1971, 2, 8), 0.77], 
       [Date.UTC(1971, 2, 14), 0.79], 
       [Date.UTC(1971, 2, 24), 2.86], 
       [Date.UTC(1971, 3, 4), 0.8 ], 
       [Date.UTC(1971, 3, 18), 0.94], 
       [Date.UTC(1971, 3, 24), 0.9 ], 
       [Date.UTC(1971, 4, 16), 1.39], 
       [Date.UTC(1971, 4, 21), 0 ] 
      ] 
     }, 
       { 
      name: 'Test5', 
      data: [ 
       [Date.UTC(1970, 9, 28), 0 ], 
       [Date.UTC(1970, 9, 16), 0.7 ], 
       [Date.UTC(1970, 11, 21), 0.87], 
       [Date.UTC(1970, 11, 21), 1.55], 
       [Date.UTC(1970, 11, 15), 1.38], 
       [Date.UTC(1971, 0, 18), 1.38], 
       [Date.UTC(1971, 0, 15), 1.38], 
       [Date.UTC(1971, 1, 1), 1.38], 
       [Date.UTC(1971, 1, 8), 1.48], 
       [Date.UTC(1971, 1, 21), 1.5 ], 
       [Date.UTC(1971, 2, 12), 1.89], 
       [Date.UTC(1971, 2, 15), 2.0 ], 
       [Date.UTC(1971, 3, 14), 1.94], 
       [Date.UTC(1971, 3, 19), 3.91], 
       [Date.UTC(1971, 3, 13), 3.75], 
       [Date.UTC(1971, 3, 19), 1.6 ], 
       [Date.UTC(1971, 4, 25), 1.6 ], 
       [Date.UTC(1971, 4, 31), 0.35], 
       [Date.UTC(1971, 5, 7), 1 ] 
      ] 
     }] 
    }); 
$("#s").change(function(){ 
    var selected = this.value; 
    var chart = $('#container').highcharts(); 

    $(chart.series).each(function(i, e) { 
     e.update({ 
      dataLabels: { 
       enabled: i == selected 
      } 
     }, false); 
    }); 
    chart.redraw(); 
}); 

注意：您在控制檯的錯誤，你應該排序由x值上升的序列數據。