frappe-charts图表插件

博客作者遇到了echarts、highcharts等依赖jQuery的图表插件因异步加载无法正常工作的问题。他们转向了frappe-charts,一个不依赖jQuery的快速、简洁的图表库。尽管frappe-charts有更新时的文字刷新bug,且缺少某些功能,如水平放置过多数据的bar图,但其速度和简洁性给人留下深刻印象。最终,由于文档不足和bug较多,作者选择了弃用。
摘要由CSDN通过智能技术生成

因为框架原因echarts,highcharts,charts所有依赖jQuery的图表插件都加载不了。
悲催3秒钟
可能是异步加载造成的
frappe-charts一款国外图表插件,不依赖jQuery,能完成基本功能.
因已调试好其他不能加载问题已弃用(官网访问太慢,资料很少),我只用的了line,bar,以及update,bar显示数字。好像还有bug,update的时候部分文字不刷新。
在这里插入图片描述
在这里插入图片描述
留个纪念
官网:https://frappe.io/charts(每次都记不住)
git:https://github.com/frappe/charts/

<script src="__STATIC__/plugs/frappe-charts1.2.4/frappe-charts.min.iife.js"></script> 

2.4版本

 var data = {
    labels:labels,//数组
    datasets: [
        {
            name: "温度", type: "bar",
            values: wendu//数组
        },
        {
            name: "寿命", type: "bar",
            values: shouming//数组
        }
    ]
}
var chart = new frappe.Chart("#mpz", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "实时采集数据",
    data: data,
    type: 'bar', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    valuesOverPoints: 1,//柱形图头部显示数字
    colors: ['blue', 'green']
});
 data.datasets=datasetsarr[val];//更新数组
     linechart.update(data);

优点:不依赖jQuery
速度快
清新
确定:BUG较多
弃用原因:没有下图bar,量太多横着放不下
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值