饼图和仪表图：使用 Plotly.js 解锁交互性，第 5 部分
（图片来源网络，侵删）
在这个教程中，我们将学习如何使用 Plotly.js 创建一个饼图和一个仪表图，这两个图表类型都是非常常见的可视化工具，可以帮助我们更好地理解数据。
1. 创建饼图
我们需要引入 Plotly.js 库，你可以通过以下方式在你的 HTML 文件中引入它：
<script src="https://cdn.plot.ly/plotlylatest.min.js"></script>
接下来，我们将创建一个简单的饼图，假设我们有以下数据：
苹果：20%
香蕉：30%
橙子：50%
我们可以使用以下代码创建一个饼图：
<!DOCTYPE html>
<html>
<head>
<title>饼图示例</title>
<script src="https://cdn.plot.ly/plotlylatest.min.js"></script>
</head>
<body>
<div id="piechart" style="width: 100%; height: 400px;"></div>
<script>
var data = [{
values: [20, 30, 50],
labels: ['苹果', '香蕉', '橙子'],
type: 'pie'
}];
var layout = {
title: '水果占比'
};
Plotly.newPlot('piechart', data, layout);
</script>
</body>
</html>
2. 创建仪表图
接下来，我们将创建一个仪表图，假设我们有以下数据：
目标：80
实际完成：65
我们可以使用以下代码创建一个仪表图：
<!DOCTYPE html>
<html>
<head>
<title>仪表图示例</title>
<script src="https://cdn.plot.ly/plotlylatest.min.js"></script>
</head>
<body>
<div id="gaugechart" style="width: 100%; height: 400px;"></div>
<script>
var data = [{
domain: {x: [0, 1], y: [0, 1]},
value: 65,
title: {text: '实际完成'},
type: 'indicator',
mode: 'gauge+number',
gauge: {axis: {range: [null, 80]}}
}];
var layout = {
title: '完成度'
};
Plotly.newPlot('gaugechart', data, layout);
</script>
</body>
</html>
现在，我们已经学会了如何使用 Plotly.js 创建饼图和仪表图，这两种图表都可以帮助我们更好地理解数据，并为我们的数据提供更丰富的可视化效果。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/483789.html
微信扫一扫