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,
                    }],

這基本上解決了我的問題。 我已經更新了我的原始代碼段。