javascript – 多个Google图表

我正在尝试创建多个Google Charts,但我无法让它工作.我已经尝试了Stack Overflow上可以找到的所有内容.我最近尝试了this修复,但它没有用.我想我可能会遗漏一些东西.任何人都可以看到现在的代码有什么问题吗？

预期行为：

页面显示条形图.然后,条形图下方会显示折线图.

目前的行为：

这是JSFiddle.在旁注中,JavaScript似乎只能在JSFiddle上内联工作.如果我将它移到JavaScript部分,它就无法正常运行.也许这与被调用的外部资源有关？

无论如何,我目前正在为此实验进行所有内联.

HTML：


最佳答案
似乎在最新版本的Google Charts API中进行了一些更改导致此行为,但有一种可靠的方法可以在单个页面上呈现多个图表.我们的想法是在渲染上一个图表后呈现下一个图表,为此您可以使用就绪事件处理程序.
话虽如此,替换

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','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([
        ['',4]
    ]);
    // Create the data table.
    var lineData = new google.visualization.arrayToDataTable([
        ['Year',2]
    ]);
    // Set chart options
    var barOptions = {
        chart: {
            title: 'Performance',height: 500
    };
    // Set chart options
    var lineOptions = {
        chart: {
            title: 'Sales History'
        },height: 500
    };


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

javascript – 多个Google图表

猜你在找的HTML相关文章