canvas基础上:chartjs

本文介绍了如何在canvas上利用Chart.js库创建图形,包括基本的配置、外层div的作用以及如何绘制极地区域图和雷达图。

1、首先在页面中引入 chart.js

<script src="Chart.js"></script>

2、页面设置

<div id="container" style="width: 500px">
    <canvas id="myChart" ></canvas>
</div>

我认为 这里 外层的 #container 必须要有,因为当没有的时候,canvas 的高度和宽度根本就限制不住啊,肆意妄为=_=

var canvas = document.getElementById('myChart');
var myChart = new Chart(canvas , {
        type: 'bar',  // 图表的类型
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //坐标值
            datasets: [{
                label: 'data 1',  // data1 名字
                data: [7, 19, 3, 5, 2, 3], // data1 数据
                backgroundColor: 'rgba(255, 99, 132, 0.2)', // data1 背景颜色
                borderColor: 'rgba(255,99,132,1)', // data1 border
                borderWidth: 1  // data1 边框宽度
            },{
                label: 'data 2',
                data: [2, 6, 13, 8, 5, 1],
                backgroundColor: 'rgba(255, 159, 64, 0.2)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            title: {
                display: true,
                text: 'Chart.js Bar Chart'
            }
        }
    });

或者是

new Chart(ctx).PolarArea(data,options);
var data = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //坐标值
    datasets: [{
       label: 'data 1',  // data1 名字
       data: [7, 19, 3, 5, 2, 3], // data1 数据
       backgroundColor: 'rgba(255, 99, 132, 0.2)', // data1 背景颜色
       borderColor: 'rgba(255,99,132,1)', // data1 border
       borderWidth: 1  // data1 边框宽度
    },{
       label: 'data 2',
       data: [2, 6, 13, 8, 5, 1],
       backgroundColor: 'rgba(255, 159, 64, 0.2)',
       borderColor: 'rgba(255, 159, 64, 1)',
       borderWidth: 1
   }]
}

这里写图片描述

2、极地区域图

var config = {
        type : 'PolarArea',
        data: {
            datasets: [{
                data: [2,5,16,9,13],
                backgroundColor: 'rgba(247,70,74,0.5)',
                label: 'My dataset 1' // for legend
            }],
            labels: ["Red"]
        },
        options:{
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart.js Polar Area Chart'
            },
            scale: {
                ticks: {
                    beginAtZero: true
                },
                reverse: false
            },
            animation: {
                animateRotate: false,
                animateScale: true
            }
        }
    }
    var ctx = document.getElementById("mychart");
    Chart.PolarArea(ctx, config);

这里写图片描述

3、雷达图

 var config = {
        type : 'radar',
        data : {
            labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
            datasets : [
                {
                    label:'data 1',
                    backgroundColor : "rgba(255,185,120,0.5)",
                    pointBackgroundColor : "rgba(255,185,120,0.1)",
                    data : [65,59,90,81,56,55,40]
                },
                {
                    label:'data 2',
                    backgroundColor : "rgba(55,255,255,0.5)",
                    pointBackgroundColor : "rgba(55,255,255,0.1)",
                    data : [28,48,40,19,96,27,100]
                }
            ]
        },
        options:{
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart.js Polar Area Chart'
            },
            scale: {
                ticks: {
                    beginAtZero: true
                }
            },
            animation: {
                animateRotate: false,
                animateScale: true
            }
        }
    }
    var ctx = document.getElementById("mychart");
    Chart.Radar(ctx, config);

这里写图片描述

4、

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值