如何添加一條情節線到Highcharts的條形圖？

我想添加一個情節線條形圖，但它沒有顯示出來。我發現的所有繪圖線的例子都與線圖有關，但是在文檔中沒有看到任何說明繪圖線不適用於繪圖板的內容。當我初始化圖表並在事實之後添加圖表時，我嘗試添加圖表，並且這兩種方法都無效。如何添加一條情節線到Highcharts的條形圖？

Here是我正在測試的示例。

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     legend: { 
      layout: 'vertical', 
      floating: true, 
      backgroundColor: '#FFFFFF', 
      align: 'right', 
      verticalAlign: 'top', 
      y: 60, 
      x: -60 
     }, 
     plotLines: [{ 
       color: '#FF0000', 
       width: 2, 
       value: 80, 
       zIndex: 5 
      }], 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y; 
      } 
     }, 
     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 
});

來源

2013-11-23 chill182

plotLines是yAxis or xAxis config的子選項，而不是因爲你有它的基本選項：

<SNIP> 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    yAxis: { 
     plotLines: [{ 
       color: '#FF0000', 
       width: 2, 
       value: 80, 
       zIndex: 5 
      }] 
    }, 
    <SNIP>

更新小提琴here。

enter image description here

來源

2013-11-23 20:43:16 Mark

在我實際的代碼我有X軸下方的主要情節。我將它移動到yAxis，現在它顯示出來。謝謝！ – chill182

@ chill182，是的，'bar'圖是用yAxis水平繪製的。 – Mark

Axis.addPlotLine（）API允許在軸線添加一行圖表已經呈現之後。

var plotOption = { 

       color: '#FF0000', 
       dashStyle: 'ShortDash', 
       width: 2, 
       value: 1000, 
       zIndex: 0, 
       label : { 
        text : 'Goal' 
       } 
      }; 
this.lineChart.yAxis[0].addPlotLine(plotOption) ;

//其中線型圖是參考現有圖表

來源

2015-06-05 11:08:35

如何添加一條情節線到Highcharts的條形圖？

回答

相關問題