Chartjs曲线图、柱状图、饼状图等多种统计图

来源:https://www.sucaihuo.com/js/873.html 2016-03-20 20:27浏览(3171) 收藏

Chartjs是一款html5统计图插件,有条形图,折线图,饼图,用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的,完全自定义,插件皮肤很NICE。
Chartjs曲线图、柱状图、饼状图等多种统计图
分类:统计图 > 柱状图 难易:中级
查看演示 下载资源: 106 下载资源 下载积分: 20 积分

Chartjs使用教程

var config = {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
                label: "My First dataset",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                fill: false,
                borderDash: [5, 5],
            }, {
                hidden: true,
                label: 'hidden dataset',
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            }, {
                label: "My Second dataset",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js Line Chart'
        },
        tooltips: {
            mode: 'label',
            callbacks: {
                // beforeTitle: function() {
                //     return '...beforeTitle';
                // },
                // afterTitle: function() {
                //     return '...afterTitle';
                // },
                // beforeBody: function() {
                //     return '...beforeBody';
                // },
                // afterBody: function() {
                //     return '...afterBody';
                // },
                // beforeFooter: function() {
                //     return '...beforeFooter';
                // },
                // footer: function() {
                //     return 'Footer';
                // },
                // afterFooter: function() {
                //     return '...afterFooter';
                // },
            }
        },
        hover: {
            mode: 'dataset'
        },
        scales: {
            xAxes: [{
                    display: true,
                    scaleLabel: {
                        show: true,
                        labelString: 'Month'
                    }
                }],
            yAxes: [{
                    display: true,
                    scaleLabel: {
                        show: true,
                        labelString: 'Value'
                    },
                    ticks: {
                        suggestedMin: -10,
                        suggestedMax: 250,
                    }
                }]
        }
    }
};

$.each(config.data.datasets, function(i, dataset) {
    dataset.borderColor = randomColor(0.4);
    dataset.backgroundColor = randomColor(0.5);
    dataset.pointBorderColor = randomColor(0.7);
    dataset.pointBackgroundColor = randomColor(0.5);
    dataset.pointBorderWidth = 1;
});
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 5楼
    10-24 14:43
    x***i
    正好是现在需要的,感谢
  • 头像 4楼
    09-14 20:43
    b***3
    good good good
  • 头像 3楼
    08-11 09:36
    2***3
    这个用上了
  • 头像 板凳
    06-30 08:49
    1***8
    这个搞不定啊
  • 头像 椅子
    06-20 14:58
    s***m
    以前没注意,这个还是挺好用
  • 头像 沙发
    06-19 09:00
    1***8
    自己写着玩意儿,就是造孽啊
1 2