Highcharts：如何突出显示yAxis值？

Question

我试图在某些时候为高图表yAxis值提供一个简单的突出显示。 我的取值范围是1到50，但是我需要突出显示1、30和50。

有没有办法做到这一点？ （绿色）

我的图表现在是柱状，但可能是柱状，我不介意

  var cidades = ["São Paulo", "Rio de Janeiro", "Belo Horizonte", "Curitiba", "Salvador", "Fortaleza", "Florianópolis"] var valoresCidades = [45, 35, 25, 15, 10, 5, 2]; $('#chartCidades').highcharts({ chart: { type: 'bar' }, title: { text: 'Pedidos por região' }, xAxis: { categories: cidades }, yAxis: { min: 0, max: 50, title: { text: 'Número de pedidos' }, plotLines: [{ value: 50, color: 'green', dashStyle: 'shortdash', width: 2, }, { value: 30, color: 'grey', dashStyle: 'shortdash', width: 2, }], stackLabels: { enabled: true, style: { fontSize: '10', fontWeight: 'lighter', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'left', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y:,.0f}<br/>' }, legend: { y: 30, verticalAlign: "top", align: "center", }, plotOptions: { column: { dataLabels: { enabled: false, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { fontSize: '9', textShadow: '0 0 1px black' } } } }, colors: [ '#FF5722', '#607D8B' ], series: [{ name: 'Pedidos', data: valoresCidades }] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="chartCidades"></div> 

Answer 1

您可以在图表上添加plotLines甚至面积，以实现该效果。 （一个或多个）。 您可以对任何轴使用addPlotLine。

http://jsfiddle.net/aev2u0a4/

 chart.yAxis[0].addPlotLine({
                value: 500,
                color: 'red',
                width: 2,
                id: 'plot-line-1'
            });

这是一个基于highcharts自己的演示的示例。 单击按钮查看添加/删除的行。

HC API文档

Answer 2

碰巧您可以将plotLines添加到yAxis初始化选项，如下所示：

                    plotLines: [{
                        value: 50,
                        color: 'green',
                        dashStyle: 'shortdash',
                        width: 2,
                    }, {
                        value: 30,
                        color: 'grey',
                        dashStyle: 'shortdash',
                        width: 2,
                    }],

这基本上解决了我的问题。 我已经更新了我的原始代码段。