HighChart - 堆积条形图 - 在条形图上显示虚线到条形图的特定部分答案

【问题标题】：HighChart - Stacked Bar chart - To show dash line over the bar chart to the specific portion in the barHighChart - 堆积条形图 - 在条形图上显示虚线到条形图的特定部分
【发布时间】：2021-08-25 17:16:10
【问题描述】：

我试图在条形图中突出显示特定部分，如上面的截图。每当我们试图突出显示时，它总是从 y 轴的原点开始。如果您必须有可能的解决方案来实现此用例，那就太好了。附上屏幕截图，解决方案的预期方式。

代码片段：

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: ['Jan'],
    visible: false
  },
  yAxis: {
    min: 0,
    visible: false
  },

  plotOptions: {
    series: {
      stacking: 'normal'
    },
    dataLabels: {
      enabled: false,
    }
  },

  series: [{
    name: 'John',
    data: [{
      y: 15
    }]
  }, {
    name: 'Jane',
    data: [{
      y: 22
    }]
  }, {
    name: 'Joe',
    borderWidth: 3,
    borderColor: 'red',
    zIndex: 1000,
    data: [
   { x:0,y:44}]
  }]
});

【问题讨论】：

标签： highcharts bar-chart

【解决方案1】：

您只需为另一个系列的边框着色。所以而不是：

series: [..., {
 name: 'Joe',
 borderWidth: 3,
 borderColor: 'red',
 zIndex: 1000,
 data: [
  { x:0,y:44}]
}]

你可以写：

series: [..., {
 name: 'Jane',
 borderWidth: 2,
 borderColor: 'red',
 zIndex: 1,     
 data: [{
  y: 22
}]
}, ...]

演示：https://jsfiddle.net/BlackLabel/648ef3v7/

【讨论】：