问谷歌图表有3列
EN

Stack Overflow用户

提问于 2015-05-14 07:37:39

回答 1查看 1.1K关注 0票数 4

我想要创建一个谷歌图表，其中有3列。此外，我想添加2组数据到它。请参考JS代码了解。

您还可以检查https://jsfiddle.net/dt6syt2w/2/

我期待着从用户那里得到一些解决方案：asgallant

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawTrendlines);

    function drawTrendlines() 
{
    var data1 = new google.visualization.DataTable();
    data1.addColumn('number', 'X');
    data1.addColumn('number', 'Normal Value 1');
    data1.addColumn('number', 'Peak Value 1');  

    data1.addRows([ 
        [0, 0, 0],    [1, 10, 15],   [2, 23, 25],  [3, 17, 26],   [4, 18, 30],  [5, 9, 20],
        [6, 11, 25],   [7, 27, 30]
    ]);

    var data2 = new google.visualization.DataTable();
    data2.addColumn('number', 'X');
        data2.addColumn('number', 'Normal Value 2');
    data2.addColumn('number', 'Peak Value 2');

    data2.addRows([
        [1, 1, 1],    [2, 20, 25],   [3, 25, 30],  [4, 23, 35],   [5, 28, 36],  [6, 19, 40], [7, 80, 100]
    ]);

        var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0, 0]], [1], [1], [1]);  

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(joinedData, options);
}

javascript

google-visualization

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-14 08:39:15

只需修复您的join()调用：

var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1, 2], [1, 2]);

[[0, 0]]对传入的每个数据表在列位置0处的键进行比较。提供给下一个参数的[1, 2]连接每个数据表中位置1和2的列。由于名为Normal Value 1、Peak Value 1、Normal Value 2和Peak Value 2的列位于这些位置，因此数据来自那里。

google.load('visualization', '1', {
  packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawTrendlines);

function drawTrendlines() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'X');
  data1.addColumn('number', 'Normal Value 1');
  data1.addColumn('number', 'Normal Value 2');

  data1.addRows([
    [0, 0, 0],
    [1, 10, 15],
    [2, 23, 25],
    [3, 17, 26],
    [4, 18, 30],
    [5, 9, 20],
    [6, 11, 25],
    [7, 27, 30]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'X');
  data2.addColumn('number', 'Peak Value 1');
  data2.addColumn('number', 'Peak Value 2');

  data2.addRows([
    [1, 1, 1],
    [2, 20, 25],
    [3, 25, 30],
    [4, 23, 35],
    [5, 28, 36],
    [6, 19, 40],
    [7, 80, 100]
  ]);

  var joinedData = google.visualization.data.join(data1, data2, 'full', [
    [0, 0]
  ], [1, 2], [1, 2]);

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(joinedData, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div">
  <div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30231876

复制

相似问题

问谷歌图表有3列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表有3列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表有3列
EN