javascript - Highcharts:如何突出显示 yAxis 值？

Question

我试图在某些点上简单突出显示 highcharts 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 自己的 demo 的示例。单击按钮以查看添加/删除的行。

hc API doc