多个谷歌图表答案

【问题标题】：Multiple Google Charts多个谷歌图表
【发布时间】：2015-10-14 14:27:24
【问题描述】：

我正在尝试创建多个 Google 图表，但无法正常工作。我已经尝试了所有可以在 Stack Overflow 上找到的东西。我最近尝试了this 修复，但没有奏效。我想我可能会遗漏一些东西。任何人都可以看到现在的代码有什么问题吗？

预期行为：

页面显示条形图。然后，条形图下方会显示一个折线图。

当前行为：

页面显示条形图。折线图不显示。

这里是JSFiddle。附带说明一下，JavaScript 似乎只能在 JSFiddle 上内联工作。如果我把它移到 JavaScript 部分，它就不能正常工作。也许这与调用的外部资源有关？

无论如何，我目前正在为这个实验做这一切。

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.google.com/jsapi" type="text/javascript">
    </script>
    <script type="text/javascript">
    // Load the Visualization API and the chart packages.
    google.load('visualization', '1.1', {
        packages: ['line', 'bar', 'corechart']
    });
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    // Callback that creates and populates a data table,
    // instantiates the charts, passes in the data and
    // draws them.
    function drawChart() {
        // Create the data table.
        var BarData = new google.visualization.arrayToDataTable([
            ['', 'Customer', 'Segment Avg'],
            ['TTM Sales', 4, 2],
            ['TTM Orders', 5, 3],
            ['TTM Categories', 7, 4]
        ]);
        // Create the data table.
        var LineData = new google.visualization.arrayToDataTable([
            ['Year', 'Customer', 'Segment Avg'],
            ['2011', 4, 5],
            ['2012', 5, 3],
            ['2013', 4, 2]
        ]);
        // Set chart options
        var BarOptions = {
            chart: {
                title: 'Performance',
            },
            width: 900,
            height: 500
        };
        // Set chart options
        var LineOptions = {
            chart: {
                title: 'Sales History'
            },
            width: 900,
            height: 500
        };
        // Instantiate and draw our chart, passing in some options.
        var BarChart = new google.charts.Bar(document.getElementById(
            'bar_chart'));
        BarChart.draw(BarData, BarOptions);
        var LineChart = new google.charts.Line(document.getElementById(
            'line_chart'));
        LineChart.draw(LineData, LineOptions);
    };
    </script>
    <title>Test Chart Page</title>
</head>
<body>
    <!--Divs that will hold the charts-->
    <div id="bar_chart"></div>
    <div id="line_chart"></div>
</body>
</html>

【问题讨论】：

问题与时间有关。这是您小提琴的工作分支，超时将两个图表的执行分开。 jsfiddle.net/m7mn72e2
另请注意，在失败的测试用例中，子元素由 googlecharts 代码添加到两个 div。

标签： javascript html charts google-visualization

【解决方案1】：

似乎在最新版本的 Google Charts API 中进行了一些导致此行为的更改，但是有一种可靠的方法可以在单个页面上呈现多个图表。这个想法是在渲染前一个图表后渲染下一个图表，为此您可以使用ready 事件处理程序。

话虽如此，替换

var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
barChart.draw(barData, barOptions);
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);

与

var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
      var lineChart = new google.charts.Line(document.getElementById('line_chart'));
      lineChart.draw(lineData, lineOptions);
});
barChart.draw(barData, barOptions);

工作示例

google.load('visualization', '1.1', {
        packages: ['line', 'bar', 'corechart']
    });
    // Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);

function drawCharts() {
    // Create the data table.
    var barData = new google.visualization.arrayToDataTable([
        ['', 'Customer', 'Segment Avg'],
        ['TTM Sales', 4, 2],
        ['TTM Orders', 5, 3],
        ['TTM Categories', 7, 4]
    ]);
    // Create the data table.
    var lineData = new google.visualization.arrayToDataTable([
        ['Year', 'Customer', 'Segment Avg'],
        ['2011', 4, 5],
        ['2012', 5, 3],
        ['2013', 4, 2]
    ]);
    // Set chart options
    var barOptions = {
        chart: {
            title: 'Performance',
        },
        width: 900,
        height: 500
    };
    // Set chart options
    var lineOptions = {
        chart: {
            title: 'Sales History'
        },
        width: 900,
        height: 500
    };


    var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
    google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
        var lineChart = new google.charts.Line(document.getElementById('line_chart'));
        lineChart.draw(lineData, lineOptions);
    });
    barChart.draw(barData, barOptions);
};

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<div id="bar_chart"></div>
<div id="line_chart"></div>

【讨论】：

与使用 setTimeout 函数相比，使用这种方法有什么好处吗？
在我看来这是更可靠的方式。在 setTimeout 的情况下，不能保证图表会被渲染，因为指定的延迟与渲染第一个图表的时间不对应

【解决方案2】：

适用于setTimeout：

// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
    'bar_chart'));
setTimeout(function() {
  BarChart.draw(BarData, BarOptions);
}, 0);
var LineChart = new google.charts.Line(document.getElementById(
    'line_chart'));
setTimeout(function() {
  LineChart.draw(LineData, LineOptions);
}, 1e3);

更新JSFiddle

【讨论】：

【解决方案3】：

下面的代码通过在 setTimeout 中创建第二个图表来工作。我不知道是什么导致了问题，但至少你有一个解决方法。

fiddle

<script type="text/javascript">
    // Load the Visualization API and the chart packages.
    google.load('visualization', '1.1', {
        packages: ['line', 'bar', 'corechart']
    });
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    // Callback that creates and populates a data table,
    // instantiates the charts, passes in the data and
    // draws them.
    function drawChart() {
        // Create the data table.
        var BarData = new google.visualization.arrayToDataTable([
            ['', 'Customer', 'Segment Avg'],
            ['TTM Sales', 4, 2],
            ['TTM Orders', 5, 3],
            ['TTM Categories', 7, 4]
        ]);
        // Create the data table.
        var LineData = new google.visualization.arrayToDataTable([
            ['Year', 'Customer', 'Segment Avg'],
            ['2011', 4, 5],
            ['2012', 5, 3],
            ['2013', 4, 2]
        ]);
        // Set chart options
        var BarOptions = {
            chart: {
                title: 'Performance',
            },
            width: 900,
            height: 500
        };
        // Set chart options
        var LineOptions = {
            chart: {
                title: 'Sales History'
            },
            width: 900,
            height: 500
        };
        // Instantiate and draw our chart, passing in some options.
        var BarChart = new google.charts.Bar(document.getElementById(
            'bar_chart'));

        var LineChart = new google.charts.Line(document.getElementById(
            'line_chart'));
        LineChart.draw(LineData, LineOptions);
        setTimeout(function(){


        BarChart.draw(BarData, BarOptions);
    },50);

        };
    </script>
    <body>
        <!--Divs that will hold the charts-->
        <div id="bar_chart"></div>
        <div id="line_chart"></div>
    </body>

【讨论】：

这是完美的。当我继续阅读时，我看到一些人说 Google Charts 中的多个图表存在问题。但是，这肯定会解决这个问题。谢谢！
如果允许，我会在 5 分钟内接受答案。
这与 Vadim 使用 ready 事件处理程序的解决方案相比如何？我想确保我使用的是最好的解决方案。在我看来，就绪处理程序更有意义，因为它直接绑定到前一个函数，而不是我们选择的抽象延迟。
确实，就绪处理程序是一种更好的方法。建议将超时作为一种解决方法，直到有更精确的解决方案可用。

【解决方案4】：

Google 在最近的版本中修复了这个计时问题，可用于冻结版本加载器：https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

【讨论】：