gpt4 book ai didi

javascript - 如何使用 Chart.js API 创建两个饼图?

转载 作者:行者123 更新时间:2023-11-28 04:54:59 24 4
gpt4 key购买 nike

这是我的 HTML 页面:

    <div>
<canvas id="chart-area1" width="300" height="300"/>
</div>
<script src="Chart.js"></script>
<script>

var pieData1 = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}

];

window.onload = function(){
var ctx1 = document.getElementById("chart-area1").getContext("2d");
var myPie1 = new Chart(ctx1).Pie(pieData1);

};



</script>

<div>
<canvas id="chart-area2" width="300" height="300"/>
</div>
<script src="Chart1.js"></script>
<script>

var pieData2 = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}

];

window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};



</script>

“Chart.js”和“Chart1.js”包含相同的内容。我只用过一次“Chart.js”,但没有用。所以我尝试了两个。

上面的 HTML 页面只显示了一个饼图。另一个饼图不显示,占用页面空间。

要显示两个饼图应该做哪些改动?提前致谢。

最佳答案

您将 window.onload 设置为一个值两次,导致它被最新值覆盖:

window.onload = function(){
var ctx1 = document.getElementById("chart-area1").getContext("2d");
var myPie1 = new Chart(ctx1).Pie(pieData1);
};
// ...
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};

为什么不把这两个功能结合起来呢?

喜欢:

var func1 = function() { /* set up chart 1 */ },
func2 = function() { /* set up chart 2 */ };

window.onload = function() {
func1();
func2();
};

关于javascript - 如何使用 Chart.js API 创建两个饼图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24700888/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com