谷歌图表有3列

Google Charts with 3 columns

本文关键字：3列 谷歌      更新时间：2023-09-26

我想创建一个有3列的谷歌图表。我还想添加2组数据。请参考JS代码来理解。

也可以查看https://jsfiddle.net/dt6syt2w/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', '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);
}

只是必须修复您的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>

相关文章：