|
|
@@ -1,16 +1,16 @@
|
|
|
-# Panel.js
|
|
|
+# Dashboard.js
|
|
|
一个简单的JS+canvas的仪表盘插件，你只需要在<canvas>中写好id和属性，在<script>中调用一下panel函数即可轻松绘制一个仪表盘！你还可以仅仅使用jQuery、Vue.js甚至document.getElementById(id).setAttribute()来更新<canvas>的参数即可修改数据和样式！
|
|
|
|
|
|
## 为什么要制作这个插件
|
|
|
我的大学报的校企合作专业，其中企业方给我们布置了一个考试，要求仿照Lenovo Learning System的教师页面做一个页面+页面相关的后端API，不能使用任何框架，指定使用HTML+CSS+JS做前端，PHP+MySQL做后端。其中页面中有四个仪表盘，因此我就用8个小时的考试时间中的约一半多一点的时间做了这个插件。然后略微修改之后便成了你现在所看到的插件的第一个版本。
|
|
|
|
|
|
-## Panel.js的特点
|
|
|
+## Dashboard.js的特点
|
|
|
- 不需要了解任何关于Canvas绘图的知识！几乎是会写HTML就能用！
|
|
|
- 基于原生JavaScript开发，能用Canvas就能用！完美兼容JQuery、Vue.js等框架！
|
|
|
- 代码只有几kb，非常轻量！
|
|
|
- ~~乱七八糟的功能少~~
|
|
|
|
|
|
-## 如何使用Panel.js？
|
|
|
+## 如何使用Dashboard.js？
|
|
|
<canvas id="canvas" width="300" height="300" data-score="50"></canvas>
|
|
|
<script src="Panel.js"></script>
|
|
|
<script>
|
|
|
@@ -19,8 +19,8 @@
|
|
|
|
|
|
只需要加入上面5行代码，你的网页上就会出现一个仪表盘！
|
|
|
|
|
|
-## Panel.js的API
|
|
|
-Panel.js拥有~~其实一点也不~~丰富的API。
|
|
|
+## Dashboard.js的API
|
|
|
+Dashboard.js拥有~~其实一点也不~~丰富的API。
|
|
|
|
|
|
|API名称|API类型|API介绍|API示例|API默认值|
|
|
|
|----|----|----|----|----|
|
|
|
@@ -34,7 +34,7 @@ Panel.js拥有~~其实一点也不~~丰富的API。
|
|
|
|data-post-text|HTML Attribute|定义仪表盘的进度后面显示的文本。|`<canvas data-post-text="%"></canvas>`|`""`|
|
|
|
|
|
|
## 使用方法
|
|
|
-**直接下载下载** [Panel.min.js](https://github.com/zbLiuLiu/Panel.js/blob/master/dist/Panel.min.js "Panel.min.js")并在页面中引入。
|
|
|
+**直接下载下载** [Dashboard.min.js](https://github.com/zbLiuLiu/Dashboard.js/blob/master/dist/Dashboard.min.js "Panel.min.js")并在页面中引入。
|
|
|
**使用CDN** 暂无CDN，将来会上传hhh
|
|
|
|
|
|
## 关于作者
|
LiuLiu