当yAxis上有一个plotband和一条plotline时，如何在高图中为plotband设置一个特定的宽度？

Question

绘图线应分布在图形上，但绘图带的宽度应较小。

1) 最初不设置宽度。

2) 当y轴宽度设置为20时

3) 我想要这样的东西，剧情带和剧情线共存的东西

This is the fiddle code link to what I have tried so far.Can someone please help me out thank you very much in advance.

https://jsfiddle.net/mncfy80p/

  chart: {
      type: "column",
      height: 205,
      plotBackgroundColor: "#D3D3D3",
      width:250,
    },
    title : {
        text:''
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          inside: true
        },
        pointPadding: 0
      }
    },
    xAxis: {
        visible:false,       
    },

    yAxis: {
        title: {
            text: ''
        }, 
      min : 0,
        max : 100,
        tickInterval : 10,
        gridLineWidth: 0,
      plotLines: [{
            value: 70,
            color: 'black',
            dashStyle: "Solid",
            width: 4,
            zIndex: 5,
            label: {
              text: 39,
              align: "right",
              x: 2,
              y: -5,
              style: {
                color: 'black',
                fontWeight: "bold",
                fontSize: "18px",
              }
            }             
      }],
      plotBands: [
    {
        color: 'rgb(204,0,0)',
        from: 0,
        to: 30.99,
        zIndex: 3,
    },
    {
        color: 'rgb(226,113,113)',
        from: 31,
        to: 44.99,
        zIndex: 3,
    },
    {
        color: 'rgb(247,209,34)',
        from: 45,
        to: 54.99,
        zIndex: 3,
    },
    {
        color: 'rgb(136,207,136)',
        from: 55,
        to: 68.99,
        zIndex: 3,
    },
    {
        color: 'rgb(68,180,68)',
        from: 69,
        to: 87.99,
        zIndex: 3,
    },
    {
        color: 'rgb(0,153,0)',
        from: 88,
        to: 100,
        zIndex: 3,
    }
],
    },
    series: [{   
            dataLabels: {
            color: "white",
            verticalAlign: "bottom",
            crop: false,
            style: {
              fontWeight: "Normal"
            }
        },
        data: [{
            y: 85,
            color:'red',
            dataLabels: {
                formatter(){
                    return '<span style="font-size:11px;">A</span>';
                },
                y:-20
            }
        }, {
            y: 72,
            color:'green',
            dataLabels:{
              formatter(){
                return '<span style="font-size:11px;">B</span>';
              },
              y:-15
            }
        }, {
            y: 83,
            color:'blue',
            dataLabels:{                
              formatter(){
                return '<span style="font-size:11px;">C</span>';
              },
              y:-15
            }
        }],
        showInLegend: false
    }]

});

Answer 1

最简单的解决方法是创建另一个y轴，并将绘图带移动到它上面。

yAxis: [{
  ...,
  plotLines: [...],
}, {
  ...,
  plotBands: [...]
}]

---

现场演示： https:/jsfiddle.netBlackLabelagq6ebjd

API参考。 https:/api.highcharts.comhighchartsyAxis。