谷歌图表：动态添加系列到图表

Question

有一个similar thread here，但答案不明确，也没有明确的例子可循。

我需要将系列动态添加到 Google 图表图表中。假设每次连续单击一个按钮都应该从我的数组中添加一个新系列。现在它只是替换它。我该怎么办？

// Init
google.charts.load('current', {'packages':['corechart']});

var currentclick = 0;

// My Data
var titles = ['Year1','Year2','Year3','Year4'];
var nums = [ [44,12,33,22], [33,11,7,8], [2,1,65,44] ];

$('#addSeries').click(function() {

   if (currentclick < 3) {
       draw(nums, currentclick);
   }
   currentclick++;
});

function draw(arr, seriesnum) {
 	var chartData = new google.visualization.DataTable();
	chartData.addColumn('string', 'Year');
	chartData.addColumn('number', 'Value');  
  
  var chartRowArray = $.makeArray();
	for (var i = 0; i < 4; i++) {
		chartRowArray.push( [ titles[i], arr[seriesnum][i] ] );
	}	
	chartData.addRows(chartRowArray);
  var chart = new google.visualization.LineChart(document.getElementById('chartarea'));
  chart.draw(chartData, null);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="addSeries">Add Next Series</button>

<div id="chartarea">
</div>

Answer 1

• 您希望每次单击“添加下一个系列”按钮时都从nums 的数据中添加折线图。

如果我的理解是正确的，那么这个修改呢？我认为您的情况有几个答案。因此，请将此视为几个答案之一。

修改点：

• 在此修改中，chartRowArray 被声明为全局变量。单击按钮时，数据将添加到chartRowArray。这样，线字符就会添加到现有图表中。

修改脚本：

// Init
google.charts.load('current', {'packages':['corechart']});
var currentclick = 0;

// My Data
var titles = ['Year1','Year2','Year3','Year4'];
var nums = [ [44,12,33,22], [33,11,7,8], [2,1,65,44] ];

$('#addSeries').click(function() {
  if (currentclick < 3) {
    draw(nums, currentclick);
  }
  currentclick++;
});

// Below script was modified.
var chartRowArray = $.makeArray(); // Added

function draw(arr, seriesnum) {
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('string', 'Year');
  for (var i = 0; i < seriesnum + 1; i++) { // Added
    chartData.addColumn('number', 'Value');
  }
  if (seriesnum === 0) { // Added
    for (var i = 0; i < 4; i++) {
      chartRowArray.push( [ titles[i], arr[seriesnum][i] ] );
    }	
  } else { // Added
    for (var i = 0; i < 4; i++) {
      chartRowArray[i].push(arr[seriesnum][i]);
    }	
  }
  chartData.addRows(chartRowArray);
  var chart = new google.visualization.LineChart(document.getElementById('chartarea'));
  chart.draw(chartData, null);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addSeries">Add Next Series</button>
<div id="chartarea"></div>

如果我误解了您的问题并且这不是您想要的结果，我深表歉意。

Answer 2

关键是数据的最终结构。

列数组应该是

0: Year
1: Value
2: Value
etc.

Column 数组以 chartData.addColumn(type, name) 的形式逐一添加。

数据的行数组应该是

0:  
   0: Year1
   1: 44
   2: 33
1:
   0: Year2
   1: 12
   2: 11
etc.

行数组一次性添加为chartData.addRows(rowArray)。

知道了这一点，我制作了两个 RowArray / ColArray 全局变量，它们可以即时修改（感谢 Tainake 的想法）和数组时的初始条件空的，我是第一次构造或初始化它们。

下面的工作示例。再次感谢您的帮助！

// Init
google.charts.load('current', {'packages':['corechart']});

var currentclick = 0;

// My Data
var titles = ['Year1','Year2','Year3','Year4'];
var nums = [ [44,12,33,22], [33,11,7,8], [2,1,65,44] ];
var chartColArray = $.makeArray(); // Global var
var chartRowArray = $.makeArray(); // Global var

$('#addSeries').click(function() {

   if (currentclick < 3) {
       draw(nums, currentclick);
   }
   currentclick++;
});

function draw(arr, seriesnum) {
	var chartData = new google.visualization.DataTable();
	
	// For initial Column, push 'Year'; otherwise, push 'Value'
	if (chartColArray.length == 0) {
		chartColArray.push('Year');
	}
	chartColArray.push('Value');
	// addColumn() has to be 1-by-1-by-1, there is no addColumns(colarray)
	$.each(chartColArray, function(index, item) {
		(index == 0 ? chartData.addColumn('string', item) : chartData.addColumn('number', item));
	});
	
	for (var i = 0; i < 4; i++) {
        // For initial Row subarray, create subarray and push 'Year Series'; 
        // otherwise, push actual 'Series' value
		if (chartRowArray[i] == undefined) {
			chartRowArray[i] = $.makeArray();
			chartRowArray[i].push(titles[seriesnum]);
		}
		chartRowArray[i].push(nums[seriesnum][i]);
	}
	chartData.addRows(chartRowArray);

	// Instantiate and draw the chart.
	var chart = new google.visualization.LineChart(document.getElementById('chartarea'));
	chart.draw(chartData, null);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="addSeries">Add Next Series</button>

<div id="chartarea">
</div>