代码拉取完成,页面将自动刷新
一个基于 JavaScript 的开源可视化图表库
首先需要进行安装:
npm install --save h5charts
安装完成以后,就可以在项目中引入了:
import H5Charts from "h5charts"
下面以绘制一个柱状图为例子:
首先准备好画布:
<div id="root" style="width:500px;height:400px;"></div>
然后直接绘制:
var el = document.getElementById("root");
var mychart = new H5Charts(el, {
xAxis: {
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar"
}]
});
如果后续需要修改数据,直接:
mychart.setOption({
series: [{
data: [20, 130, 50, 80, 170, 10, 130],
type: "bar"
}]
});
更多内容和细节,你可以直接 查看文档 获得哦~
此外,你还可以使用跨端的 "H5Charts / Chart" 和 "H5Charts / Canvas" 来创建自己的图表库项目~
MIT License
Copyright (c) zxl20070701 走一步,再走一步
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。