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 doc

Answer 2

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

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

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

Highcharts：如何突出yAxis价值？

2 个答案: