请选择 进入手机版 | 继续访问电脑版

VueJs 3 前端开发技术学习 Front-end Study

 找回密码
 加入学习
搜索
热搜: 活动 交友 discuz
查看: 391|回复: 0

Chart.js 一套基于 HTML5 的简单、干净并且有吸引力的图表库

[复制链接]

33

主题

35

帖子

187

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
187
发表于 2022-4-12 16:37:12 | 显示全部楼层 |阅读模式
一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库
安装:
  1. npm install chart.js
复制代码
基本用法:
  1. <canvas id="myChart" width="400" height="400"></canvas>

  2. import Chart from 'chart.js/auto'

  3. // 页面渲染完成后执行
  4. const ctx = document.getElementById('myChart')
  5. const myChart = new Chart(ctx, {
  6.   type: 'bar',
  7.   data: {
  8.     labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  9.     datasets: [
  10.       {
  11.         label: '# of Votes',
  12.         data: [12, 19, 3, 5, 2, 3],
  13.         backgroundColor: [
  14.           'rgba(255, 99, 132, 0.2)',
  15.           'rgba(54, 162, 235, 0.2)',
  16.           'rgba(255, 206, 86, 0.2)',
  17.           'rgba(75, 192, 192, 0.2)',
  18.           'rgba(153, 102, 255, 0.2)',
  19.           'rgba(255, 159, 64, 0.2)'
  20.         ],
  21.         borderColor: [
  22.           'rgba(255, 99, 132, 1)',
  23.           'rgba(54, 162, 235, 1)',
  24.           'rgba(255, 206, 86, 1)',
  25.           'rgba(75, 192, 192, 1)',
  26.           'rgba(153, 102, 255, 1)',
  27.           'rgba(255, 159, 64, 1)'
  28.         ],
  29.         borderWidth: 1
  30.       }
  31.     ]
  32.   },
  33.   options: {
  34.     scales: {
  35.       y: {
  36.         beginAtZero: true
  37.       }
  38.     }
  39.   }
  40. })
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入学习

本版积分规则

QQ|Archiver|手机版|小黑屋|vue3

GMT+8, 2022-5-26 15:17 , Processed in 0.036708 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表