2013-11-23 2 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

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> 

Update скрипку here.

enter image description here

+0

В моем фактическом коде я имел сюжетные под XAxis. Я переместил его на 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) ; 

// где Linechart является ссылка на существующий график

Смежные вопросы