2013-02-18 54 views
1

我想在Highcharts製作一個簡單的條形圖。但是,我希望最大值小於系列中的實際最大值,並提供正在發生的視覺線索。Highcharts Bar延伸過去MaxValue

如果引用的highcharts演示: http://www.highcharts.com/demo/bar-basic

我想規模在4000結束,即使最長的酒吧延伸到4054這部分很簡單,只需通過設置最大。

但是,我想要一些視覺指標,讓用戶知道酒吧超出最大。這是對於序列中最高值很高的情況,這使得很難看到圖表中的其他值相對於其他值。我們基本上不需要關心異常值,但需要知道它位於軸之外。

想一想,我可以設置ticks小於最大值,並以tickInterval false結束。還有其他選擇嗎?

回答

1

那麼,但這些信息應該顯示在哪裏呢?

我已經準備了一個簡單的例子,它在工具提示和圖表下面的報告div中標記了這些信息。

http://jsfiddle.net/sbochan/8sKcs/

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     title: { 
      text: 'Historic World Population by Region' 
     }, 
     subtitle: { 
      text: 'Source: Wikipedia.org' 
     }, 
     xAxis: { 
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      max:4000, 
      title: { 
       text: 'Population (millions)', 
       align: 'high' 
      }, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       if(this.y > (this.series.chart.yAxis[0].max)) 
        return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ; 
       else 
        return this.series.name +': '+ this.y; 
      } 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Year 2008', 
      data: [973, 914, 4054, 732, 34] 
     }] 
    },function(chart){ 

     var max = chart.yAxis[0].max, 
      content = '<h2>Points</h2><br/>'; 

     $.each(chart.series,function(i,serie){ 
      $.each(serie.data,function(j,data){ 
       if(data.y > max) 
        content += 'Point: '+data.y+' is bigger than max: '+max; 
      }); 
     }); 

     $('#report').html(content); 

    }); 
}); 

});

編輯:

您也可以

data.graphic.attr({ 
        fill:'yellow' 
       }); 

添加到更改欄的顏色。

+0

想你。我希望能做的,也許是讓酒吧變得像銀色一樣。我試圖將這種行爲添加到您的示例中:http://jsfiddle.net/manishap/WQkeQ/2/。此代碼不起作用有兩個原因:1)它將所有酒吧變成銀色。 2)查看工具提示後,默認返回藍色,不保留顯式顏色設置。你看到我在做什麼錯了嗎? – manisha 2013-02-19 20:01:19

+0

嗨塞巴斯蒂安,謝謝你的迴應。我利用了你的建議。我有一個新問題。如果用戶查看工具提示,我分配給該欄的顏色更改不會持續。在翻轉/展開時,不同顏色的欄會恢復爲默認值。我需要什麼樣的選項來改變這一點。我在這裏更新了小提琴:http://jsfiddle.net/WQkeQ/4/ – manisha 2013-02-20 22:05:49