Добавление цели в столбчатую диаграмму в Highchart

Question

Я создаю динамические гистограммы и хочу добавить целевой столбец в каждом столбце.Знание количества столбцов неизвестно, и на каждом значении оси x имеется более одного столбца.

this.chartObject = {
    chart: {
        type: 'column'
    },
    title: {
        text: ' '
    },
    legend: {
        useHTML: true

    },
    xAxis: {
        categories: categories ,
        crosshair: false
    },
    yAxis: {
        min: 0,
        title: {
            text: ' '
        }
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function () {
            return this.y
        }
    },
    series: series
}

, и вот нижеприведенный пример элемента моей серии

{
    y:innerDimensionMember.Score.Actual.Value , 
    target : innerDimensionMember.Score.Target.Value ,
    targetOptions:{              
        borderWidth:0,
        height:3,
        width:'140%'
    }
}

Я хочурезультат будет по этой ссылке https://i.imgur.com/ZdBfvze

Answer 1

Вы можете использовать bullet type series для создания диаграммы.Проверьте демонстрацию, размещенную ниже.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    type: 'bullet'
  },
  plotOptions: {
    series: {
        pointPadding: 0.2,
      groupPadding: 0.1,
      targetOptions: {
        borderWidth: 0,
        height: 3,
        color: 'red',
        width: '140%'
      }
    }
  },
  xAxis: {
    categories: ['Alex ar', 'Cairo ar']
  },
  series: [{
    data: [{
      y: 1650,
      target: 2000
    }, {
      y: 2000,
      target: 1500
    }]
  }, {
    data: [{
      y: 2350,
      target: 2100
    }, {
      y: 1700,
      target: 1750
    }]
  }],
  tooltip: {
    pointFormat: '<b>{point.y}</b> (with target at {point.target})'
  }
});

Демо:
https://jsfiddle.net/BlackLabel/orwqxepk/3/

Ссылка API:
https://api.highcharts.com/highcharts/series.bullet