frappe-chart自适应svg图表插件-BFW插件库

frappe-chart自适应svg图表插件

frappe-chart自适应svg图表插件，插件类型包括axis-mixed， bar ，line ，pie， percentage

使用方式：

第一步引入bfwone

第二步use插件及css

第三步配置参数

        const data = {
            labels: ["2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
            ],//数据标签
            datasets: [{
                name: "人数",//鼠标悬浮提示
                chartType: 'line',//鼠标悬浮提示类型
                values: [14,
                    35,
                    33,
                    23,
                    35,
                    13,
                    33,
                ]//数据值
            }],


            yRegions: [{
                label: "居家",//标签名称
                start: 0,//y轴最小刻度
                end: 40,//y轴最大刻度
                options: {
                    labelPos: 'right'
                }//标签位置
            }]


        };
        const chart = new frappe.Chart("#chart", {
            data: data,
            title: "季度销售表",//图表标题
            type: 'line',//类型 pie bar line percentage
            height: 300,//高度
            colors: ['purple', '#ffa3ef']//颜色
        });

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["frappe-charts.min.iife"], function() {
                const data = {
                    labels: ["2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                    ],
                    datasets: [{
                        name: "人数",
                        chartType: 'line',
                        values: [14,
                            35,
                            33,
                            23,
                             35,
                            13,
                            33,
                        ]
                    }],


                    yRegions: [{
                        label: "居家",
                        start: 0,
                        end: 40,
                        options: {
                            labelPos: 'right'
                        }
                    }]
                };

                const data1 = {
                    labels: ["2月",
                        "3月",
                        "4月",
                        "5月",
                    ],
                    datasets: [{
                        name: "人数",
                        chartType: 'pie',
                        values: [34,
                            15,
                            33,
                           23,
                        ]
                    }],


                    yRegions: [{
                        label: "居家",
                        start: 0,
                        end: 40,
                        options: {
                            labelPos: 'right'
                        }
                    }]
                };


                const chart = new frappe.Chart("#chart", {
                    data: data,
                    title: "季度销售表",
                    type: 'line',
                    height: 300,
                    colors: ['purple', '#ffa3ef']
                });
                
                
                const chart2 = new frappe.Chart("#chart1", {
                    data: data1,
                    title: "季度销售表",
                    type: 'pie',
                    height: 300,
                    colors: ['purple', '#ffa3ef']
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <h2 style="text-align:center;">Frappe chart</h2>
    <div id="chart"></div>
    <div id="chart1"></div>
</body>
</html>

官网：https://frappe.io/charts