2016-12-05 30 views
2

我正在製作一個顯示產品價格的線圖。問題是圖表有很大的幅度,所以它非常混亂。Google線圖 - 設置較小幅度

enter image description here

因此,如果Y軸的範圍會更大(比如說800 - 1500)的幅度會看起來更小的圖表會更好安排。

你知道該怎麼做嗎?

這是代碼,實際上它連接了多個數據集。

<script> 
    function range(start, end) { 
     var array = []; 
     for (var i = start; i < end; i++) { 
      array.push(i); 
     } 
     return array; 
    } 


    function drawChart() { 
     var google_chart_json = {{ google_chart|safe }}; 
     var datas = []; 
     $.each(google_chart_json, function (key, val) { 
      var domain = key; 
      var data = new google.visualization.DataTable(); 
      data.addColumn('datetime', domain + 'Date'); 
      data.addColumn('number', domain); 


      $.each(val, function (_, scan) { 
       var year = scan[0][0]; 
       var month = scan[0][1]; 
       var day = scan[0][2]; 
       var hour = scan[0][3]; 
       var price = scan[1]; 

       data.addRows([ 
        [new Date(year, month-1, day, hour), price] 
       ]); 
      }); 
      datas.push(data); 
     }); 
     var joinedData = datas[0]; 
     $.each(datas, function (index, datatable) { 
      console.log('joining index ' + index) 
      if (index != 0) { 
       joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], range(1, index + 1), [1]); 
      } 
     }); 


     var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 

     chart.draw(joinedData, { 
      height: 500, 
      width: 1000, 
      interpolateNulls: true, 
      explorer: { 
       maxZoomOut: 10, 
       keepInBounds: true 
      }, 
     }); 
    } 
    google.charts.load('current', {packages: ['corechart'], callback: drawChart}); 
{# google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});#} 
</script> 

回答

1

設置Y軸的範圍內使用vAxis.viewWindow選項...

vAxis: { 
    viewWindow: { 
    min: 800, 
    max: 1500 
    } 
} 
+0

是的,謝謝。是否有可能取決於最大值和最小值?我知道我可以通過JSON並找到最大值和最小值,但也許有一個更簡單的方法... –

+1

是的,數據表有一個方法 - getColumnRange - 它獲取列索引並返回對象,其屬性爲min和最大 – WhiteHat