如何在谷歌的可視化圖表API

我有兩個Python列表如何在谷歌的可視化圖表API

passlist1= [[1, "Saturday"], [6, "Sunday"], [12 ,"Wednesday"], [31, "Monday"], [14, "Monday"], [1, "Tuesday"], [1, "Sunday"]] 
failedlist2= [[11, "Saturday"], [26, "Sunday"], [22 ,"Wednesday"], [41, "Monday"], [15, "Monday"], [16, "Tuesday"], [51, "Sunday"]]

我可以只是路過列表1作爲參數使用單列表繪製圖形，但現在我想使用多個列表作爲單個數據將兩個列表都繪製在一張圖中。這是我的海圖編

//load the Google Visualization API and the chart 
google.load('visualization', '1', {'packages': ['columnchart']}); 

//set callback 
google.setOnLoadCallback (createChart); 

//callback function 
function createChart() { 

    //create data table object 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string','Number Stats'); 
    dataTable.addColumn('number', passeD'); 
    dataTable.addColumn('string', Failed'); 

    dataTable.addRows(list1); 

    //instantiate our chart object 
    var chart = new google.visualization.ColumnChart (document.getElementById('chart')); 


    //define options for visualization 
    var options = {width: 400, height: 240, is3D: true, title: 'Bar Chart'}; 

    //draw our chart 
    chart.draw(dataTable, options); 

}

我需要這樣的東西的passlist和failedlist對比圖。

可能嗎？

來源

2012-01-30 saun jean

而不是一次添加所有行，您可以使用addRow方法將多個數組組合成一行。

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

var list1= [[1, "Saturday"], [6, "Sunday"], [12 ,"Wednesday"], [31, "Monday"], [14, "Monday"], [1, "Tuesday"], [1, "Sunday"]] 
var list2= [[11, "Saturday"], [26, "Sunday"], [22 ,"Wednesday"], [41, "Monday"], [15, "Monday"], [16, "Tuesday"], [51, "Sunday"]] 

//load the Google Visualization API and the chart 
google.load('visualization', '1', {'packages': ['columnchart']}); 

//set callback 
google.setOnLoadCallback (createChart); 

//callback function 
function createChart() { 

    //create data table object 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string','Number Stats'); 
    dataTable.addColumn('number', 'passed'); 
    dataTable.addColumn('number', 'failed'); 

    for(var i = 0; i < list1.length; i++){ 
     var row = [ list1[i][1], list1[i][0], list2[i][0] ]; 
     dataTable.addRow(row); 
    } 

    //instantiate our chart object 
    var chart = new google.visualization.ColumnChart (document.getElementById('chart')); 


    //define options for visualization 
    var options = {width: 400, height: 240, is3D: true, title: 'Bar Chart'}; 

    //draw our chart 
    chart.draw(dataTable, options); 

} 
    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart"></div> 
    </body> 
</html>

來源

2012-01-31 20:18:22

我試過這段代碼。同名列表被繪製兩次。 List1甚至沒有顯示。請您檢查代碼並重新編輯 – 2012-02-02 11:53:56

我犯了一個錯字，很抱歉。修復了代碼，以便顯示兩個列表。 – 2012-02-02 12:29:47

那是正確的答案 – 2012-02-02 13:07:05

如何在谷歌的可視化圖表API

回答

相關問題