canvas基础上：chartjs

最新推荐文章于 2024-08-29 07:57:51 发布

原创最新推荐文章于 2024-08-29 07:57:51 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#chart.js #canvas

Canvas+Svg+Chart-js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在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、