試圖在圖表上繪制虛線

Question

嗨，我正在嘗試在高點圖表上繪制虛線，但是當我嘗試這樣做時，這些線條要么將圖表推到位，要么跳過圖表並繼續通過它。我還試圖在標簽上方放置標簽每個條形圖

這是我的代碼

$(function () {
        $('#container5').highcharts({
            chart: {
                type: 'column'

            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            tooltip: { enabled: false },
            exporting: {
                   enabled:false
                },

             credits: {
                  enabled: false
              },

              legend: {
                  enabled:false
              },
            xAxis: {
                 labels:
                    {
                      enabled: false
                    },
                    lineColor: 'transparent',
                     minorTickLength: 0,
                       tickLength: 0,
                       min: 0,
                          lineWidth: 0,
                   minorGridLineWidth: 0,
                   lineColor: 'transparent',

                      gridLineColor: 'transparent',
                        title: {
                            text: ''
                        },
                categories: ['']
            },
            yAxis: {
                 labels:
                    {
                      enabled: false
                    },
                    lineColor: 'transparent',
                     minorTickLength: 0,
                       tickLength: 0,
                       min: 0,
                          lineWidth: 0,
                   minorGridLineWidth: 0,
                   lineColor: 'transparent',


                      gridLineColor: 'transparent',
                        title: {
                            text: ''
                        },
                min: 0,
                title: {
                    text: ' '
                },

            },


            plotOptions: {
                column: {
                    stacking: 'normal',
                     animation: false

                },
                series: {
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            },

            series: [{
                name: '10',
                data: [10],
                 pointWidth: 50,
                 groupPadding: 0,
                 color: '#f7a35c'
            }, {
                name: '12',
                data: [12],
                pointWidth: 50,
                groupPadding: 0,
                color: '#004A98'
            }, {
                name: '12',
                data: [12],
                pointWidth: 50,
                groupPadding: 0,
                color: '#509ADC'
            }]
        });
    });

和

<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>

看起來像

圖片一

但我希望它看起來像這樣

圖片二

Answer 1

像這樣在YAxis上定義繪圖線。 演示

yAxis: {
     title: {
         ...
     },
     plotLines: [{
         value: minValue,
         color: 'green',
         dashStyle: 'shortdash',
         width: 2,
         label: {
             text: 'Last quarter minimum'
         }
     }, {
         value: maxValue,
         color: 'red',
         dashStyle: 'shortdash',
         width: 2,
         label: {
             text: 'Last quarter maximum'
         }
     }]
 }

編輯

另外，如果您想將plotLines對齊到左側，則可以嘗試以下操作：

Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x*2,y + height,'L',0,y + width];
};

DEMO

Answer 2

您可以使用Renderer.path在圖表中添加自定義線。

chart.renderer.path(['M', 0, 0, 'L', 100, 100])
    .attr({
        'stroke-width': 2,
        stroke: 'red'
    })
    .add();