1. 首頁
  2. 問答
  3. 多個谷歌圖表

多個谷歌圖表

2015-10-14 112 views
4

我正在嘗試創建多個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>

來源

2015-10-14 bboysupaman

+0

的問題與時序。這裏是你的小提琴的工作分叉與超時分開兩個圖表的執行。 https://jsfiddle.net/m7mn72e2/ – CodeToad

+0

還請注意，在失敗的測試用例中，子元素通過googlecharts代碼添加到兩個div。 – CodeToad

回答

8

似乎有些變化已經在最新版本的谷歌圖表API的導致出現此問題進行了，但是有一個可靠的方法來呈現多個圖表s在一個頁面上。這個想法是在渲染前一個圖時渲染下一個圖，爲此，您可以利用事件處理函數ready。

話雖如此，與

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>

更換 

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

來源

2015-10-14 14:50:59

+0

與使用setTimeout函數相比，使用此方法有什麼好處嗎？ – bboysupaman

+2

在我看來，這是更可靠的方法。在setTimeout的情況下，不能保證圖表將得到呈現，因爲指定的延遲不對應於第一個圖表呈現的時間 –

1

下面的代碼通過創建的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>

來源

2015-10-14 14:36:13 CodeToad

+0

這是完美的。隨着我繼續閱讀，我看到一些人認爲Google圖表中有多個圖表存在問題。但是，這肯定會解決這個問題。謝謝！ – bboysupaman

+0

當我允許的時候，我會在5分鐘內接受答案。 – bboysupaman

+1

這與Vadim使用ready事件處理程序的解決方案相比如何？我想確保我使用最好的解決方案。在我的腦海中，就緒處理程序更有意義，因爲它與前一個函數直接相關，而不是我們選擇的抽象延遲。 – bboysupaman

0

作品與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

來源

2015-10-14 14:39:51 Valentin

相關問題

 相關問題