Визуализация Google переключает несколько графиков в таблицу Div

Question

Визуализация Google переключает несколько графиков в таблицу Div

Я искал и видел только примеры создания нескольких Google Charts с помощью одной функции «drawChart» с помощью setOnLoadCallback (drawChart). Я пытаюсь нарисовать шесть новых диаграмм в одной функции, чтобы перезаписать диаграммы в существующих тегах div. Когда я вызываю свою функцию drawChart2 (), страница обновляется существующими диаграммами первой функции. Каждая диаграмма содержит свой набор данных, и я пытаюсь в основном переключать все содержимое панели с помощью кнопки меню. Должен ли я использовать ChartWrapper вместо этого?

Спасибо за любое руководство!

0

json php visualization

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Может быть, вы должны использовать ChartWrapper. Я получил пример для вас, где вы можете переключаться между наборами данных. Вы также можете переключаться между типами диаграмм.

Пример JSFiddle

google.load('visualization', '1.0', {'packages': ['corechart']});
google.setOnLoadCallback(initialize);

function initialize() {

var chart = new google.visualization.ChartWrapper({
containerId: 'chart-div'
});

var data = google.visualization.arrayToDataTable([
['Month', 'Value1', 'Value2'],
['Jan 2016', 1000, 500],
['Feb 2016', 1200, 600],
['March 2016', 1300, 650],
['April 2016', 800, 400]
]);

var data2 = google.visualization.arrayToDataTable([
['Month', 'Value1', 'Value2'],
['Jan 2015', 2000, 120],
['Feb 2015', 2500, 800],
['March 2015', 560, 200],
['April 2015', 700, 500]
]);

var options =
{
title: 'Product Rating',
colors: ['#00d819', '#ff0000'],
vAxis: {minValue: 0},

animation: {
duration: 1000,
easing: 'out'
}
};

var button1 = document.getElementById('b1');
var button2 = document.getElementById('b2');
var button3 = document.getElementById('b3');
var button4 = document.getElementById('b4');function drawChart1() {
chart.setChartType('AreaChart');
chart.setDataTable(data);
chart.setOptions(options);
chart.draw();
}

function drawChart2() {
chart.setChartType('AreaChart');
chart.setDataTable(data2);
chart.setOptions(options);
chart.draw();
}

function drawChart3() {
chart.setChartType('LineChart');
chart.setDataTable(data);
chart.setOptions(options);
chart.draw();
}

function drawChart4() {
chart.setChartType('ColumnChart');
chart.setDataTable(data2);
chart.setOptions(options);
chart.draw();
}

button1.onclick = function () {
drawChart1();
}

button2.onclick = function () {
drawChart2();
}

button3.onclick = function () {
drawChart3();
}

button4.onclick = function () {
drawChart4();
}

drawChart1();
}

0