npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

xb_chart

v1.3.1

Published

try to build chart by this tools

Downloads

43

Readme

xb_chart

数据可视化图表挂件整合

NPM version

解决问题

  • 重复的图表样式,ctrl C+V低效且大量option配置文件影响开发
  • UI更新了设计风格之后,老旧项目更新起来十分困难

使用

安装

npm install xb_chart

更新

npm install xb_chart

调用

    import xb_chart from "xb_chart"

    let xb_chartObj = new xb_chart();

    xb_chartObj.barlineChartMaker({
        "dom":'',
        "textColor":"#a2bd90",
        "lineColor":"#3bbd1e",
        "barColor":"#312fbd",
        "xAxisData":["2016","","","","2017","","","","2018"],
        "lineData":[40,28,35,80,70,60,70,60,30],
        "barData":[25,15,17,5,12,15,10,12,14],
        "callback":[{
            "event":"click"
            }
        ]}
    );

使用思路

  • new xb_chart()的时候可以传入一个对象覆盖工程的默认样式,这样再后续的具体方法使用的过程中可以尽可能少的传参就能达到风格不突兀的效果
  • new xb_chart()可以在项目入口new一次即可(后期考虑写install函数)。也可以在分页面重新new一次以达到这个分页面独有的风格(说的就是党建,这个页面普遍需要红色主题)
  • 项目没有uglify,可以点进去看注释,比较简单,不需要文档

开发

  • npm install
  • 全局工具在src/tools.js
  • 图表集合在src/chartSet.js
  • 图表构造器在src/chartMaker.js
  • 挂架构造器、装饰(美观div)构造器敬请期待
  • 丰富功能、编写方法注释
  • npm run ver做版本
  • npm run pub上传
  • 通过另外一个项目调用查看效果

规范

  • 尊重已有的编码风格[命名|es版本|注释方法]

ps:后续的项目会更新npm install xb_chart,要注意迭代兼容

ps2:通过另外一个项目调用和查看效果很麻烦,可以rollup.config.js配置打包直接打包到另外一个项目的assest目录去,另外一个项目import xb_chart from "../assets/xb_chart.bundle.js"来使用。build完之后如果另外一个项目支持热更新则可以返回浏览器直接查看效果了

FAQ

  • 如果效果图和插件提供的效果有差距该怎么办
    • 如果该效果是进步的,修改插件(增加参数or增加方法),所有项目可以考虑同步更新
    • 如果该效果只是和效果图有小差距,协商不修改
    • 如果协商失败,通过增加参数来进行判断
    • 如果该效果只是和效果图有大差距,判断是否是有特征的效果
    • 如果是具有特征的效果,为此新写一个方法
    • 如果是没什么特征,以后的项目很可能不用这个效果,通过传orginOption来临时覆盖样式规则
    • 如果传orginOption要传很多,那还不如不调用该插件了。