高图-柱形图上的图带

时间:2019-03-01 06:42:47

标签: angular highcharts

我想显示x轴区域(a到c)之间的绘图带。我尝试了以下操作,但是仍然无法检测到绘图带。

https://jsfiddle.net/pavanskipo/nsoaveph/7/

下面是示例TS代码:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    plotBands: [{
      to: 'a',
      color: "#FFAAAA",
      from: 'c'
    }],
    categories: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"],
    crosshair: true
  },
  yAxis: {
    min: 0,
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    "color": "#8085e9",
    "data": [null, 1, 1, 2, 2, 2, 2, 3, 1, 1, 1, 1, 1],
    "name": "Linux"
  }, {
    "color": "#f15c80",
    "data": [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, null, null],
    "name": "Others"
  }]
});

1 个答案:

答案 0 :(得分:2)

您需要将common.ConfigGroupfrom属性设置为数值:

to

实时演示:https://jsfiddle.net/BlackLabel/gmj8eq0u/

API参考:https://api.highcharts.com/highcharts/xAxis.plotBands.from