试图在图表上绘制虚线

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();