iT邦幫忙

0

放置多個且不同 style 的 google chart?

我第一個是 bar style

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

  $.getJSON('/data.json?type=view&m=' + m, function(json) {
    var data = new google.visualization.DataTable(json);
    data.addColumn('string', '');
    data.addColumn('number', '瀏覽次數');
    data.addRows(json);

    // Set chart options
    var options = {
              chart: {
                title: '',
                subtitle: '',
              },
              bars: 'vertical',
              vAxis: {format: 'decimal'},
              width: 900,
              height: 400,
              colors: ['#E7736D']
            };


    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));

  });
}

這是我第一個圖表
但是我想要在同一頁放上第二個圖表,style 也不是 bar,這能怎麼做到?
以下是谷歌範例:https://developers.google.com/chart/interactive/docs/gallery/linechart

google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

我在 packages + line、改變名字也不行
在網路上是有找到類似的方式
http://crossdunk.github.io/google-chart/
但感覺歷史久遠,好像搭不起來

1 個回答

3
froce
iT邦高手 1 級 ‧ 2018-11-08 14:28:59
最佳解答

https://codepen.io/froce-lu/pen/yQeGPX?editors=1010
...沒用過google charts,但也只花了5分鐘看code耶。

懶得把code整理,自己把繪圖code改成function吧。

asys0512 iT邦研究生 5 級 ‧ 2018-11-08 14:50:58 檢舉

神!

froce iT邦高手 1 級 ‧ 2018-11-08 15:51:04 檢舉

這不神啊,就靜下心來看程式碼而已啊。
google的範例寫的蠻清楚的,稍懂JS的應該看到就會改了。

asys0512 iT邦研究生 5 級 ‧ 2018-11-08 17:05:16 檢舉

我想說怎麼加都沒有用...
原來是後端給的值也要跟(addColumn)宣告成一樣的格式,例如 php 是int

我要發表回答

立即登入回答