2013-11-23 81 views
4

我想添加一个情节线条形图,但它没有显示出来。我发现的所有绘图线的例子都与线图有关,但是在文档中没有看到任何说明绘图线不适用于绘图板的内容。当我初始化图表并在事实之后添加图表时,我尝试添加图表,并且这两种方法都无效。如何添加一条情节线到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] 
     }] 
    }); 
}); 

回答

5

plotLinesyAxis 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

+0

在我实际的代码我有X轴下方的主要情节。我将它移动到yAxis,现在它显示出来。谢谢! – chill182

+0

@ chill182,是的,'bar'图是用yAxis水平绘制的。 – Mark

3

Axis.addPlotLine()API允许在轴线添加一行图表已经呈现之后。

var plotOption = { 

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

//其中线型图是参考现有图表

相关问题