Google Charts перестает рисовать после первого графика
Что я хочу сделать
Показать несколько гистограмм на одной странице
То, что я уже сделал
Гистограммы ранее были линейными диаграммами. В качестве линейных диаграмм я мог бы показать две диаграммы на одной странице без проблем. Я использовал для них две отдельные drawChart () - функции. Затем я преобразовал диаграммы в гистограммы (material design). Теперь он показывает только один график. Я уже искал ответ и нашел его: Как добавить два графика Google на одной странице? Я следую этому и это все еще не работает.
Мой Код
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {
packages: ["Bar"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn("string", "Key1");
data1.addColumn("number", "Value1");
data1.addRows([
['2015.01', 65.5],
['2015.02', 52.6],
['2015.03', 45.5],
['2015.04', 40.7],
['2015.05', 68.7],
['2015.06', 56.4],
['2015.07', 38.4],
['2015.08', 45.2],
['2015.09', 45.2],
['2015.10', 4.8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn("string", "Key2");
data2.addColumn("number", "Value2");
data2.addRows([
['2015.01', 300.08],
['2015.02', 455.08],
['2015.03', 454.62],
['2015.04', 362.93],
['2015.05', 527.12],
['2015.06', 588.28],
['2015.07', 409.93],
['2015.08', 432.08],
['2015.09', 462.33],
['2015.10', 32.38]
]);
var options = {};
var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
chart1.draw(data1, options);
var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
chart2.draw(data2, options);
}
</script>
<div id="chart_div1"></div>
<div id="chart_div2"></div>
Лучше всего посмотреть здесь: https://jsfiddle.net/yrzf3v97/
Проблема
Он показывает только одну диаграмму. Большая часть тме - это первая, но иногда и вторая. С помощью функции alert () можно подтвердить, что код выполняется до конца.
2 ответа:
По-видимому, это поведение связано с функцией
draw
. В частности, вторая диаграмма не визуализируется, так какдиаграмма SVG не генерируется после того, как функцияdraw
вызывается во второй раз.Согласно документации:
Метод draw() является асинхронным: то есть он возвращает данные немедленно, но экземпляр, который он возвращает, может быть недоступен не сразу.
Для визуализации нескольких диаграмм на странице вы можете рассмотрим следующий подход: визуализируйте следующую диаграмму после визуализации предыдущей , например:
var chart1 = new google.charts.Bar(document.getElementById("chart_div1")); google.visualization.events.addOneTimeListener(chart1, 'ready', function(){ //render chart2 once chart1 is rendered var chart2 = new google.charts.Bar(document.getElementById("chart_div2")); chart2.draw(data2, options); }); chart1.draw(data1, options);
Полный пример
google.load("visualization", "1.1", { packages: ["Bar"] }); google.setOnLoadCallback(drawChart); function drawChart() { var data1 = new google.visualization.DataTable(); data1.addColumn("string", "Key1"); data1.addColumn("number", "Value1"); data1.addRows([['2015.01', 65.5], ['2015.02', 52.6], ['2015.03', 45.5], ['2015.04', 40.7], ['2015.05', 68.7], ['2015.06', 56.4], ['2015.07', 38.4], ['2015.08', 45.2], ['2015.09', 45.2], ['2015.10', 4.8]]); var data2 = new google.visualization.DataTable(); data2.addColumn("string", "Key2"); data2.addColumn("number", "Value2"); data2.addRows([['2015.01', 300.08], ['2015.02', 455.08], ['2015.03', 454.62], ['2015.04', 362.93], ['2015.05', 527.12], ['2015.06', 588.28], ['2015.07', 409.93], ['2015.08', 432.08], ['2015.09', 462.33], ['2015.10', 32.38]]); var options = {}; drawCharts([{id: 'chart_div1', data: data1, options: options},{id: 'chart_div2', data: data2, options: options}]); } function drawCharts(chartsOptions,index) { var curIndex = index || 0; var chartOptions = chartsOptions[curIndex]; var chart = new google.charts.Bar(document.getElementById(chartOptions.id)); google.visualization.events.addOneTimeListener(chart, 'ready', function(){ if(curIndex < chartsOptions.length - 1) drawCharts(chartsOptions,curIndex+1); }); chart.draw(chartOptions.data, chartOptions.options); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div1"></div> <div id="chart_div2"></div>
Для всех, кто столкнется с этой проблемой в 2016 году, у вас может быть код, как у меня, который ссылается на более старую версию Google Charts. Обновите свои ссылки, чтобы следовать последним рекомендациям по адресу https://developers.google.com/chart . в моем случае следующие изменения строки за строкой исправили проблему:
Старый:
<script type="text/javascript" src="https://www.google.com/jsapi"></script> google.load('visualization', '1.1', {'packages':['bar']}); google.setOnLoadCallback(drawCharts); var chart = new google.charts.Bar(document.getElementById('myDivId')); chart.draw(data, google.charts.Bar.convertOptions(options));
Новое:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> google.charts.load('current', {packages:['corechart']}); google.charts.setOnLoadCallback(drawCharts); var chart = new google.visualization.ColumnChart(document.getElementById('myDivId')); chart.draw(data, options);