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系列类型来创建图表。查看下面发布的演示。

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

在Highchart的柱形图中添加目标

1 个答案: