使用HighCharts的100％宽度的堆积条形图

Question

如何创建下面的条形图？有两个版本。谢谢。

Answer 1

您可以使用堆积条形图获得结果。两个系列 - 一个包含实际数据，另一个用于填充条形图并保留标签。您应该对您自己的数据进行标准化（为第二个系列设置补充值，为轴设置最小/最大值）。

    series: [{
  color: 'green',
  data: [5, 3, 1],
  dataLabels: {
    align: 'right',
    format: '{point.y} %'
  }
}, {
  color: 'grey',
  data: [{
    y: 3,
    label: 'Footbal'
  }, {
    y: 5,
    label: 'Soccer'
  }, {
    y: 7,
    label: 'Baseball'
  }],
  dataLabels: {
    align: 'left',
    format: '{point.label}'
  }
}]

示例：http://jsfiddle.net/tPw24/553/

对于第二张图表，只需交换颜色和数据：http://jsfiddle.net/tPw24/555/