javascript - 试图在图表上画虚线

Question

嘿，伙计们，我试图在我的 highcharts 图表上画虚线，但是当我尝试这样做时，这些线要么将图表推离位置，要么跳过图表并继续过去。我还试图在上面贴上标签每个条形图的顶部也是

这是我的代码

$(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>

看起来像

Picture one

但我希望它看起来像这样

Picture two

Answer 1

您可以使用 Renderer.path在图表中添加自定义线。

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