2012-10-04 169 views
0

我想在x軸上生成一個帶有時間軸的堆積柱狀圖,其中每個系列不一定具有與所討論日期相匹配的數據點。我能夠爲每個數據點生成一個具有多個列的列圖,但我確實需要一個堆積圖。圖表的數據是JSON,我可以根據需要操縱格式。Highcharts堆疊的柱狀圖與不規則的時間間隔可能嗎?

var options = { 
       chart: { 
        renderTo: 'timeline', 
        zoomType: 'x', 
        type: 'column' 
       }, 
       title: { 
        text: 'Releases' 
       }, 
       yAxis: { 
        title: { 
        text: 'Count' 
        } 
       }, 
       xAxis: { 
        type: 'datetime' 
       }, 
       legend: { 
        enabled: true 
       }, 
       series: [] 
      }; 

/* 
Following URL returns json like: 

{ 
    "rows": { 
     "dynamicCategory1": { 
      "0": { 
       "count": "7", 
       "unix_date": "1344225600" 
      }, 
      "3": { 
       "count": "2", 
       "unix_date": "1344312000" 
      } 
     }, 
     "dynamicCategory2": { 
      "5": { 
       "count": "7", 
       "unix_date": "1344225600" 
      }, 
      "7": { 
       "count": "2", 
       "unix_date": "1345003200" 
      } 
     } 
    } 
} 

*/ 

$.getJSON("/mydatainjsonformat/", function(data) { 

    $.each(data.rows, function(key, val) { 
    var series = { data: [] }; 

    series.name = key; 

    $.each(val, function(key2, val2) { 
     var x = parseFloat(val2.unix_date * 1000); 
     var y = parseFloat(val2.count); 

     series.data.push([x, y]); 

    }); 

    options.series.push(series); 

    }); 

    $(function() { 
     var chart1; 
     $(document).ready(function() { 
      chart1 = new Highcharts.Chart(options); 
     }); 
    }); 
}); 

理論上我可以改變的數據包括每個類別中沒有指定日期的值0,然後進行日期的類別 - 但這是去這裏的正確方法嗎?難道不會在x軸上縮短時間嗎?任何方向極大的讚賞。

jsfiddle

+1

你能生成一個小提琴嗎? http://jsfiddle.net –

+0

處理它...謝謝。 – user1720033

+0

jsfiddle在上面和這裏添加了:http://jsfiddle.net/KyqPj/123/ – user1720033

回答

0

什麼,我認爲是要實現這樣的事情。

你有類似的事件,從X日期開始,你想繪製直到Y日期。

所以,你正在嘗試使用這個使用堆積條形圖,所以,你會得到橫跨Y軸線。

如果我是正確的,那麼我會建議你使用Highstock,它是由Highcharts開發的庫之一。

Highstock是創建時間線圖表的首選API。

我已經創建了一個示例小提琴幫助您開始。在這裏你去:http://jsfiddle.net/mhardik/YmRUg/

+0

我試圖實現的是在不同類別的數量和類別的數量和種類隨着時間的推移而變化。我昨天晚上發現了一個例子,基本上我正在努力實現: http://jsfiddle.net/DjHDW/100/ 現在我只需要弄清楚我有什麼和有什麼不同。 – user1720033

+0

@ user1720033:這對你有幫助嗎?請閱讀FAQ以更好地使用SO。 –

+0

如上所示,不,它沒有幫助 - 我最終解決了我自己的問題(也如上所述)。欣賞努力。 – user1720033

2

如此:很多的痛苦和折磨後,我錯過了這節這需要作爲配置傳遞我的圖表:

   plotOptions: { 
       column: { 
        stacking: 'normal' 
       }, 

甚至認爲我花了很長時間才找到,因爲我的大部分測試都是在那裏做的,但沒有camelCased plotOptions。 劉海頭上的鍵盤多次和流淚

它現在工作得很好。其他麻煩:爲了讓jsfiddle通過AJAX調用('/ echo/json /')返回json給你,你必須發佈給它。花了我一段時間來確定爲什麼$ .getJSON不起作用。

相關問題