如何在單個頁面中繪製餅圖和柱狀圖

我需要在單個頁面中繪製餅圖和柱狀圖，當我使用包「欄」時，它可以繪製柱狀圖但不能餅圖如何在單個頁面中繪製餅圖和柱狀圖

google.charts.load('current', {'packages':['bar']}); 
var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 

    chart.draw(data, google.charts.Bar.convertOptions(options));

當我使用「corechart」的包，它將繪製的餅圖，但不可能得出一個柱形圖

（但能夠繪製條形圖）

google.charts.load("current", {packages:["corechart"]}); 
var chart = new google.visualization.PieChart(document.getElementById('donutchart')); 
    chart.draw(data, options);

怎樣繪製兩個圖在一個單一的頁面？

來源

2017-08-09 Jiju John

你可以像下面： -

google.charts.load('current', {packages: ['corechart','bar']});//add multiple packages 
 
google.charts.setOnLoadCallback(drawMaterial); //call there corresponsing draw functions 
 
google.charts.setOnLoadCallback(drawChart);//call there corresponsing draw functions 
 
function drawMaterial() { // add each function definition 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['City', '2010 Population', '2000 Population'], 
 
    ['New York City, NY', 8175000, 8008000], 
 
    ['Los Angeles, CA', 3792000, 3694000], 
 
    ['Chicago, IL', 2695000, 2896000], 
 
    ['Houston, TX', 2099000, 1953000], 
 
    ['Philadelphia, PA', 1526000, 1517000] 
 
    ]); 
 

 
    var materialOptions = { 
 
    chart: { 
 
     title: 'Population of Largest U.S. Cities' 
 
    }, 
 
    hAxis: { 
 
     title: 'Total Population', 
 
     minValue: 0, 
 
    }, 
 
    vAxis: { 
 
     title: 'City' 
 
    }, 
 
    bars: 'horizontal' 
 
    }; 
 
    var materialChart = new google.charts.Bar(document.getElementById('chart_div'));//draw on different-different elements 
 
    materialChart.draw(data, materialOptions); 
 
} 
 

 
function drawChart() {// add each function definition 
 

 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Task', 'Hours per Day'], 
 
    ['Work',  11], 
 
    ['Eat',  2], 
 
    ['Commute', 2], 
 
    ['Watch TV', 2], 
 
    ['Sleep', 7] 
 
    ]); 
 

 
    var options = { 
 
    title: 'My Daily Activities' 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));//draw on different-different elements 
 

 
    chart.draw(data, options); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    <!--Load the AJAX API--> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <!--Div that will hold the pie chart--> 
 
    <div id="chart_div"></div> 
 
    <div id="piechart" style="width: 900px; height: 500px;"></div> 
 
    </body> 
 
</html>

來源

2017-08-09 05:43:26

如何在單個頁面中繪製餅圖和柱狀圖

回答

相關問題