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 6

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);