Javascript 在仅跨一个条形图的Highcharts中创建绘图条带

我想在Highcharts中创建类似的内容： 具有每个条形图唯一的绘图栏

我通过为每个条形图创建一个图表来做到这一点 但这并不能很好地扩展：

---

如何通过只创建一个图表来实现这一点？

您可以通过另外三个系列（每种颜色一个系列）来实现这一点，该系列禁用分组并正确设置条形图宽度

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  xAxis: {
    categories: ['One category', 'Another category']
  },

  yAxis: {
    min: 0,
    max: 100
  },

  plotOptions: {
    series: {
      grouping: false,
      pointWidth: 30,
      borderWidth: 0,
      enableMouseTracking: false,
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    data: [100, 100],
    linkedTo: 'main',
    colorIndex: 5
  }, {
    data: [65, 55],
    linkedTo: 'main',
    colorIndex: 2
  },{
    data: [35, 15],
    linkedTo: 'main',
    colorIndex: 3
  }, {
    id: 'main',
    data: [49, 65],
    pointWidth: 15,
    colorIndex: 0,
    enableMouseTracking: true
  }]
})

实例和输出

---

您可以通过三个附加系列（每种颜色一个系列）来实现这一点，该系列禁用分组并正确设置条宽

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  xAxis: {
    categories: ['One category', 'Another category']
  },

  yAxis: {
    min: 0,
    max: 100
  },

  plotOptions: {
    series: {
      grouping: false,
      pointWidth: 30,
      borderWidth: 0,
      enableMouseTracking: false,
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    data: [100, 100],
    linkedTo: 'main',
    colorIndex: 5
  }, {
    data: [65, 55],
    linkedTo: 'main',
    colorIndex: 2
  },{
    data: [35, 15],
    linkedTo: 'main',
    colorIndex: 3
  }, {
    id: 'main',
    data: [49, 65],
    pointWidth: 15,
    colorIndex: 0,
    enableMouseTracking: true
  }]
})

实例和输出

---

为什么不使用多个系列创建一个图表？为什么不使用多个系列创建一个图表？啊哈，使用实际系列而不是实际的绘图带！非常聪明。谢谢如果我想改变其中一个类别中颜色的顺序，用“红”、“绿”、“橙”来代替。我如何才能做到这一点？啊哈，使用实际的系列而不是实际的绘图带！非常聪明。谢谢如果我想改变其中一个类别中颜色的顺序，用“红”、“绿”、“橙”来代替。我怎样才能做到这一点？