javascript - 具有 3 列的 Google 图表

Question

我想创建一个包含 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);
}

Answer 1

只需修复您的 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>