javascript - 将数组中的数据插入饼图 (chart.js)
问题描述
我有 2 个要插入饼图的数据数组。
所以我有这个代码:
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
我不想写标签和数据,而是想从 2 个数组(一个用于标签,一个用于数据)中获取此信息。我该怎么做?
解决方案
请使用为您创建的以下 jsfiddle ,这可能会对您有所帮助。
https://jsfiddle.net/ua5hsj7k/
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Pie</title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<div class="chart-container">
<div class="pie-chart-container">
<canvas id="pie-chartcanvas-1"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</body>
</html>
# js文件中的代码
var piechart = $("#pie-chartcanvas-1");
var data1 = {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor:
["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
};
var chart = new Chart(piechart,{
type:"pie",
data : data1,
options:{}
})
推荐阅读
- django - 使用 GCP 托管的 django 应用程序上的服务器错误
- c - 系统监视器中的 C curl 调用
- java - Eclipse/Gradle 多项目中的库行为不稳定 (UnsatisfiedLinkError)
- javascript - 为什么html元素未定义?
- machine-learning - 如何设计基于深度的分类器来预测二元问题?
- if-statement - 链接多个“if else”是否比多个连续的“if”语句更快?
- javascript - Json、javascript 和树视图
- excel - 行为空时如何强制计算 SUM
- firebase - 如何在 Flutter 中制作动态下拉按钮列表?(删除项目)
- unity3d - Unity - ProBuilder - 烘焙光照贴图时的黑白线条