如何在单个页面中绘制饼图和柱状图

我需要在单个页面中绘制饼图和柱状图，当我使用包“栏”时，它可以绘制柱状图但不能饼图如何在单个页面中绘制饼图和柱状图

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

如何在单个页面中绘制饼图和柱状图

回答

相关问题