2012-06-26 99 views
3

我想使用Google的柱狀圖顯示數據。我試圖顯示不堆疊的酒吧,但它不會從兩端顯示一個酒吧。然後我將房產isStacked更改爲true,它顯示了所有酒吧,但它在兩端都收穫了酒吧。谷歌柱圖修剪酒吧

Google Column Chart http://i45.tinypic.com/3h4za.png

我怎樣才能解決這個問題?

我正在玩的選項,但似乎沒有任何工作。

<script type='text/javascript'> 
    google.load('visualization', '1', { 'packages': ['corechart'] }); 
    google.setOnLoadCallback(drawSizeChart); 
    var d = 0; 
    function drawSizeChart() { 

     $.post('/metrics/SiteResourceChart', { fnsId: "@Model.FnsId", regionId: selectedValue }, 
      function (data) { 
       if (Object.keys(data).length !== 0) { 
        var tdata = new google.visualization.DataTable(); 
        tdata.addColumn('date', 'Date'); 
        for (var p = 0; p < data.length; ++p) { 
         tdata.addColumn('number', data[p][0].PathName); 
        } 

        d = data[0].length; 
        for (var i = 0; i < data.length; ++i) { 
         for (var j = 0; j < data[i].length; ++j) { 
          var date = new Date(parseInt(data[i][j].CreatedAt.substr(6))); 
          var rCount = data[i][j].ResourceCount; 
          if (i === 0) 
           tdata.addRow([date, rCount, null]); 
          else 
           tdata.addRow([date, null, rCount]); 
         } 
        } 


        var options = { 
         title: 'Resource Count', 
         titleTextStyle: { fontSize: 20 }, 
         isStacked: true, 
         bar: { groupWidth: '20%' }, 
         chartArea: { left: '50' }, 
         hAxis: { viewWindowMode: 'maximized' } 

         //legend: { position: 'none' } 
        }; 

        var chart = new google.visualization.ColumnChart(document.getElementById('site_size_chart')); 
        chart.draw(tdata, options); 
       } 
      } 
     ); 
    } 
</script> 

回答

0

我想一個快速的解決辦法是定義你的第一列,而不是日期「字符串」,並留下了hAxis.viewWindowMode爲默認值。否則,您應該配置hAxis.viewWindow對象(即最小/最大值)。

+1

我修好了。我將軟件包更改爲'columnchart',並修復了它。不管怎麼說,多謝拉 :-) – SherCoder

0

同樣的問題在這裏。我所做的是我在第一天的前一天和最後一天後的一天添加了一個0值的虛擬數據,以達到所需的結果。

使用columnchart軟件包對我來說不是一個解決方案,因爲我有幾天沒有數據,但希望保持時間軸成比例。