当前位置:主页 > JavsScript库 > 图表 >

javascript 的分段水平条形图组件 – syncro.js
栏目分类:图表   发布日期:2021-08-13   浏览次数:

syncro.js 是一个用于生成分段(阶梯)水平条形图(进度条)的小型 JavaScript 库。

使用

1. 在页面中包含syncro.css 和syncro.js。

<link rel="stylesheet" href="./syncro.css" />
<script src="./syncro.js"></script>

2、为分段条形图创建一个空容器,在data-stepped-bar属性中定义自己的图表数据如下:

<div data-stepped-bar='{"title": "Custom Title", "catagories": [ { "name": "Label 1", "value": 50, "color": "#ff6384" }, { "name": "Label 2", "value": 50, "color": "#ffcd56" } ]}'>
    </div>

3. 您也可以直接在syncro.js.

var defaults = {
    title: "Ticket Categories",
    catagories: [
      {
        name: "Remote Support",
        value: 66,
        color: "#ff6384",
      },
      {
        name: "Contract Work",
        value: 14,
        color: "#ff9f40",
      },
      {
        name: "Network Project",
        value: 8,
        color: "#ffcd56",
      },
      {
        name: "Regular Maintenance",
        value: 6,
        color: "#4bc0c0",
      },
      {
        name: "string",
        value: 3,
        color: "#36a2eb",
      },
    ],
};

官方网站:https://github.com/nyash04/stepped-bar-chart

上一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库