如何在高圖中繪製每個類別的線？

Question

我試圖找出是否有某種方式來繪製在highcharts每個類別的線，我已經試過這doc和我目前的圖表下面一段時間是這樣的：

我想實現的是這樣的：

每行都在下一個類別停止，這樣我就可以設置每個類別的「目標」。

我code到目前爲止

Highcharts.chart('container', { 
     chart: { 
     type: 'bar' 
     }, 
     title: { 
     text: 'Historic World Population by Region' 
     }, 
     subtitle: { 
     text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>' 
     }, 
     xAxis: { 
     categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
     title: { 
      text: null 
     } 
     }, 
     yAxis: { 
     min: 0, 
     title: { 
      text: 'Population (millions)', 
      align: 'high' 
     }, 
     labels: { 
      overflow: 'justify' 
     }, 
     plotLines: [{ 
      color: 'red', 
      value: 300, 
      width: 2 
     }] 
     }, 
     tooltip: { 
     valueSuffix: ' millions' 
     }, 
     plotOptions: { 
     bar: { 
      dataLabels: { 
      enabled: false 
      } 
     } 
     }, 
     legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -40, 
     y: 80, 
     floating: true, 
     borderWidth: 1, 
     backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
     shadow: true 
     }, 
     credits: { 
     enabled: false 
     }, 
     series: [{ 
     name: 'Gastos', 
     data: [107, 31, 635, 203, 2], 
     color: '#f25a41' 
     }, { 
     name: 'Renda', 
     data: [133, 156, 947, 408, 6], 
     color: '#5c90f9' 
     }] 
    }); 

Answer 1

最簡單的方法是爲每個類別使用Renderer.path()功能創建自定義標記。

API參考：
http://api.highcharts.com/highcharts/Renderer.path

例子：
https://jsfiddle.net/809y2wcn/