canvas基础上：chartjs

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

彩笔_小qing

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

阅读量1.9k

点赞数

分类专栏： Canvas+Svg+Chart-js 文章标签： chart.js canvas

本文链接：https://blog.csdn.net/qq_31164127/article/details/72931530

版权

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

摘要由CSDN通过智能技术生成

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,