chartist.js 是简单的响应式图表插件-BFW插件库

chartist.js 是简单的响应式图表插件

chartist.js 是简单的响应式图表插件，可以作为前端图表生成器。

主要特性：

使用基于配置的转换简单处理

使用明确的分离，具有巨大的灵活性(使用 CSS 样式和 JS 控制)

使用 SVG

完全响应式，具有独立 DPI

多媒体查询的响应式配置

完全使用 SASS 构建，并且支持自定义

使用方式：

第一步引入bfwone

第二步use插件及css和主题css

第三步配置参数

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["chartist.min", "chartist.min"], function() {
                var chart = new Chartist.Line('#lineB-ChartExample', {
                    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    series: [
                        [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
                        [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null][(
                            {
                                x: 3, y: 3
                            }, {
                                x: 4, y: 3
                            }, {
                                x: 5, y: undefined
                            }, {
                                x: 6, y: 4
                            }, {
                                x: 7, y: null
                            }, {
                                x: 8, y: 4
                            }, {
                                x: 9, y: 4
                            })]]
                },

                    {
                        fullWidth: true,
                        lineSmooth: Chartist.Interpolation.cardinal({
                            fillHoles: true
                        }),

                        low: 0
                    });


                var data = {
                    labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
                    series: [
                        [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]]
                };



                var options = {
                    seriesBarDistance: 10
                };


                var responsiveOptions = [
                    ['screen and (max-width: 640px)', {
                        seriesBarDistance: 5,
                        axisX: {
                            labelInterpolationFnc: function (value) {
                                return value[0];
                            }
                        }
                    }]];




                new Chartist.Bar('#lineBarExample', data, options, responsiveOptions);

                var data = {
                    series: [5, 3, 4]
                };


                var sum = function (a, b) {
                    return a + b;
                };

                new Chartist.Pie('#pieChartExample', data, {
                    labelInterpolationFnc: function (value) {
                        return Math.round(value / data.series.reduce(sum) * 100) + '%';
                    }
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
 <div class="chart chart--green" id="pieChartExample">

</div>
 <div class="chart chart--green" id="lineBarExample">

</div>
 <div class="chart chart--green" id="lineB-ChartExample">

</div>
</body>
</html>