前端JS统计图表插件chart,各种类型的图标都可以实现

By | 2020年6月13日

统计图表在很多场景中都会用到(例如:erp系统,金融平台,电商平台,甚至很多中小型网站都会用到统计图表),主要是为了直观的查看数据的走向,达到分析作用。

chart插件官方网站:https://www.chartjs.org/

效果展现:

使用方法:

1、首先引入这两个文件:chart.min.js , utils.js

2、使用:

<div class="line-chart box-sd">
     <canvas id="chart-area"></canvas>
</div>
<div class="line-chart box-sd">
     <canvas id="chart-area1"></canvas>
</div>
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, configPie);
/*****************访客区域分布*****************/
window.randomScalingFactor1 = function() {
                return Math.round(Math.random() * 100);
            };

            var configPie1 = {
                type: 'pie',
                data: {
                    datasets: [{
                        data: [
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1(),
                            randomScalingFactor1()
                            
                        ],
                        backgroundColor: [
                            window.chartColors.red, 
                            window.chartColors.orange, 
                            window.chartColors.yellow, //
                            window.chartColors.green,
                            window.chartColors.blue,
                            'rgb(255,182,193)',
                            'rgb(219,112,147)',
                            'rgb(255,105,180)',
                            'rgb(218,112,214)'
                        ],
                        label: 'Dataset 1'
                    }],
                    labels: [
                        '安徽',
                        '北京',
                        '河南',
                        '湖北',
                        '湖南',
                        '99',
                        '99',
                        '99',
                        '其他'
                    ]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: '女性访客区域分布'
                    },
                }
            };

            var ctx1 = document.getElementById('chart-area1').getContext('2d');
            window.myPie1 = new Chart(ctx1, configPie1);

发表评论

电子邮件地址不会被公开。 必填项已用*标注