javascript - 如何在 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'
      }]
    });

最佳答案

最简单的方法是使用Renderer.path()函数为每个类别创建自定义标记。

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

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