推荐一款强大的数据可视化库——Plotly.js
Plotly.js 是一个基于 JavaScript 的数据可视化库,它可以非常方便地在网页上创建和更新图表。以下是一个使用 Plotly.js 创建简单条形图的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plotly.js 条形图示例</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myPlot" style="width:480px;height:400px;"></div>
<script>
// 数据
var trace = {
x: ["类别A", "类别B", "类别C"],
y: [20, 14, 23],
type: 'bar'
};
// 数据组
var data = [trace];
// 布局
var layout = {
title: '条形图示例'
};
// 初始化 Plotly 图表
Plotly.newPlot('myPlot', data, layout);
</script>
</body>
</html>
这段代码创建了一个简单的条形图,其中包含三个类别的数据点。图表的标题是“条形图示例”,并且图表会在 id 为 "myPlot" 的 div 元素中显示。
评论已关闭