如何在同一个网页显示两张饼图
时间: 2024-03-01 15:56:17 浏览: 62
投票系统struts2.0+hibernate3.2+spring2.5+sqlserver2005数据库,+JFReeChart饼图,柱状图显示。
5星 · 资源好评率100%
要在同一个网页中显示两张饼图,你可以使用html和JavaScript代码来实现。以下是一些步骤:
1. 在html文档中,创建两个canvas元素,分别为两张饼图提供空间。
```html
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
```
2. 在JavaScript中,使用Chart.js等图表库创建两个饼图。
```javascript
var ctx1 = document.getElementById('chart1').getContext('2d');
var myChart1 = new Chart(ctx1, {
type: 'pie',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
data: [10, 20, 30],
backgroundColor: ['red', 'blue', 'green']
}]
}
});
var ctx2 = document.getElementById('chart2').getContext('2d');
var myChart2 = new Chart(ctx2, {
type: 'pie',
data: {
labels: ['Label 4', 'Label 5', 'Label 6'],
datasets: [{
data: [40, 50, 60],
backgroundColor: ['yellow', 'purple', 'orange']
}]
}
});
```
3. 将JavaScript代码放置在html文档中,确保在canvas元素之后加载。
```html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<script>
// JavaScript代码放置在这里
</script>
</body>
</html>
```
这样就可以在同一个网页中显示两张饼图了。
阅读全文