Google Charts: динамически добавлять серии в диаграмму - PullRequest
Новая
       15

Google Charts: динамически добавлять серии в диаграмму

0 голосов
/ 26 мая 2019

Здесь есть похожая тема , но ответ не ясен, и нет четкого примера для подражания.

Мне нужно динамически добавлять серии в график Google Charts.Предположим, что каждое последующее нажатие кнопки должно добавлять новую серию из моего массива.Прямо сейчас это просто заменяет это.Что мне делать? 

// 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>

Ответы [ 2 ]

1 голос
/ 26 мая 2019

Ключевым моментом является окончательная структура данных.

Массив столбцов должен быть 

0: Year
1: Value
2: Value
etc.

Массив столбцов добавляется 1 к 1как 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>
1 голос
/ 26 мая 2019
  • Вы хотите добавлять линейную диаграмму из данных 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>

Если я неправильно понял ваш вопрос, и это был не тот результат, которого вы хотите, я прошу прощения.

...