放置多个且不同 style 的 google chart？

Question

我第一个是 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...

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/go...
但感觉历史久远，好像搭不起来

Answer 1

我換了另一個圖表
https://apexcharts.com/