HTML5——Canvas图表插件 chart.js的基础使用
2024-06-22 06:55:20
Canvas图表插件
推荐三种比较好用的。
- chart.js 灵活、可个性化设置图表样式的js图表插件
- chartist.js 配置简单，只需要设置数据即可，包是最小的。
- HighCharts.js 浏览器兼容性最强（有中文文档）
一、chart.js
chart.js是简单而灵活的javascript图表插件，底层封装了canvas，而且是复合目前主流的响应式。
官网下载chart.js
而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。
1.创建一个简单的图表
chart.js目前有两种版本1.0版本和2.0版本，两个版本创建图表的方式有区别。以下使用的是chart.js的2.0版本。
2.0版本
有4种方式获取
<canvas>元素，任意一种都行，建议使用第二种。
var ctx = document.getElementById("myChart"); //dom
var ctx = document.getElementById("myChart").getContext("2d"); //dom
var ctx = $("#myChart"); //jqueryvar ctx = "myChart"; //建议不要使用
使用chart.js
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {type: 'bar', //图片类型data: {}, //数据和样式options: {} //图表的配置
});
</script>
1.0版本
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");var myChart = Chart.bar(ctx, {data: {}, //图表数据和样式options: {} //图表的配置
});
</script>
2.图表
chart.js提供了图表类型中常用的几种：
- line 折线图
- bar 柱状图
- radar 雷达图
- doughnut 环状图
- pie 饼状图
- polarArea 极地区域图
- bubble 气泡图
- 混合图
（1）line 折线图
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx,{type: 'line',data:{labels: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],datasets: [{label: '红线',data: [65,21,34,67,56,12,54,78,90,10,12,76],borderColor: 'rgba(255,0,0,1)',backgroundColor: 'rgba(255,0,0,0.5)',fill: false,lineTension: 0,},{label: '蓝线',data: [34,80,29,76,23,89,12,67,77,12,94,45],borderColor: 'rgba(75,193,193,1)',backgroundColor: 'rgba(75,193,193,1)',fill: false,lineTension: 0,}],},options:{}
});
dataset中常用的属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>折线图</title><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>var ctx = document.getElementById("myChart").getContext("2d");// 设置数据内容var data = {// 设置图表中水平轴显示的内容labels: ["January", "February", "March", "April", "May", "June", "July"],// 设置图表中的数据datasets: [{// 当前图表数据的标题内容label: "My First dataset",// 是否填充折线与水平轴中间的区域fill: true,// 设置折线数据点的贝塞尔曲线值（值为0时为折线）lineTension: 0.1,// 设置背景颜色backgroundColor: "rgba(75,192,192,0.4)",// 设置边框颜色borderColor: "rgba(75,192,192,1)",// 设置折线端点的样式borderCapStyle: 'butt',// 破折号的长度和间距borderDash: [],// 破折号的偏移量borderDashOffset: 0.0,// 设置折线交点的样式borderJoinStyle: 'miter',// 设置折线数据点的边框颜色pointBorderColor: "rgba(75,192,192,1)",// 设置折线数据点的背景颜色pointBackgroundColor: "#fff",// 设置折线数据点的边框宽度pointBorderWidth: 1,// 设置当鼠标悬停折线数据点时的半径pointHoverRadius: 5,// 设置当鼠标悬停折线数据点时的背景颜色pointHoverBackgroundColor: "rgba(75,192,192,1)",// 设置当鼠标悬停折线数据点时的边框颜色pointHoverBorderColor: "rgba(220,220,220,1)",// 设置当鼠标悬停折线数据点时的边框宽度pointHoverBorderWidth: 2,// 设置折线数据点的半径pointRadius: 1,//pointHitRadius: 10,// 设置折线中所有的数据data: [65, 59, 80, 81, 56, 55, 40],// 如果设置为true，将在没有数据或空数据的点之间绘制直线spanGaps: false,}]};var options = {}var myLineChart = new Chart(ctx, {type: 'line',data: data,options: options});
</script>
</body>
</html>
（2）bar 柱状图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>如何绘制柱状图</title><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>var ctx = document.getElementById("myChart").getContext("2d");var data = {labels: ["January", "February", "March", "April", "May", "June", "July"],datasets: [{label: "My First dataset",backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255,99,132,1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1,data: [65, 59, 80, 81, 56, 55, 40],}]};var options = {};var myBarChart = new Chart(ctx, {type: 'bar',data: data,options: options});
</script>
</body>
</html>
（3）radar 雷达图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>雷达图</title><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body><div class="chart" style="width: 600px;height: 700px;"><canvas id="myChart"></canvas></div>
<script>var ctx = document.getElementById("myChart").getContext("2d");var data = {labels: ["事业", "财运", "爱情", "人缘", "健康", "友情", "情亲"],datasets: [{label: "张三",backgroundColor: "rgba(179,181,198,0.2)",borderColor: "rgba(179,181,198,1)",pointBackgroundColor: "rgba(179,181,198,1)",pointBorderColor: "#fff",pointHoverBackgroundColor: "#fff",pointHoverBorderColor: "rgba(179,181,198,1)",data: [65, 59, 90, 81, 56, 55, 40]},{label: "马四",backgroundColor: "rgba(255,99,132,0.2)",borderColor: "rgba(255,99,132,1)",pointBackgroundColor: "rgba(255,99,132,1)",pointBorderColor: "#fff",pointHoverBackgroundColor: "#fff",pointHoverBorderColor: "rgba(255,99,132,1)",data: [28, 48, 40, 19, 96, 27, 100]},{label: "王五",backgroundColor: "rgba(25,99,132,0.2)",borderColor: "rgba(25,99,132,1)",pointBackgroundColor: "rgba(25,99,132,1)",pointBorderColor: "#fff",pointHoverBackgroundColor: "#fff",pointHoverBorderColor: "rgba(25,99,132,1)",data: [48, 84, 43, 39, 69, 71, 100]}]};var options = {};var myRadarChart = new Chart(ctx, {type: 'radar',data: data,options: options});
</script>
</body>
</html>
（4）polarArea 极地区域图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>极地区域图</title><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body><div class="chart" style="width: 600px;height: 700px;"><canvas id="myChart"></canvas></div><script>var ctx = document.getElementById("myChart").getContext("2d");var data = {datasets: [{data: [11,16,7,3,14],backgroundColor: ["#FF6384","#4BC0C0","#66ccff",],label: 'My dataset' // for legend}],labels: ["Red","Green","Yellow","Grey","Blue"]};var options = {};var myPolarAreaChart = new Chart(ctx, {type: 'polarArea',data: data,options: options});
</script>
</body>
</html>
（5）pie 饼状图 和 doughnut 环形图
饼状图和环形图就是 type参数不同
饼状图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body><div style="width: 500px;height: 600px;"><canvas id="myChart"></canvas> </div><script>var ctx = document.getElementById("myChart").getContext("2d");var data = {labels: ["Red","Blue","Yellow"],datasets: [{data: [300, 50, 100],backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]}]};var options = {};var myPieChart = new Chart(ctx,{type: 'pie',data: data,options: options});</script>
</body>
</html>
环形图
var myDoughnutChart = new Chart(ctx, {type: 'doughnut',data: data,options: options});
（6）bubble 气泡图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>气泡图</title><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body><div style="width: 500px;height: 400px;"><canvas id="myChart"></canvas> </div><script>var ctx = document.getElementById("myChart").getContext("2d");var data = {datasets: [{label: 'First Dataset',data: [{x: 20,y: 30,r: 15},{x: 40,y: 10,r: 10}],backgroundColor:"#FF6384",hoverBackgroundColor: "#FF6384",}]};var options = {};var myBubbleChart = new Chart(ctx,{type: 'bubble',data: data,options: options});
</script>
</body>
</html>
（7）混合图表
混合图表必须是在图表类型为bar(柱状图)的基础上设置的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>制作混合图表</title><script src="./public/js/Chart.js"></script>
</head>
<body><div style="width: 500px;height: 400px;"><canvas id="myChart"></canvas></div>
<script>var ctx = document.getElementById("myChart").getContext("2d");var myChart = new Chart(ctx, {type: 'bar',data: {labels: ['Item 1', 'Item 2', 'Item 3'],datasets: [{type: 'bar',label: 'Bar Component',data: [40, 20, 30],backgroundColor : 'rgba(255,255,0,0.5)',},{type: 'line',fill: false,borderColor: 'rgba(255,0,0,0.5)',label: 'Line Component',data: [40, 20, 30],}]}});
</script>
</body>
</html>
3.改变图表的位置和大小
单纯的设置图表的<canvas>元素的width和height不起作用。
我们可用通过将图表的<canvas>元素包裹一层<div>，通过改变<div>的宽和高以及定位来改变图表。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>折线图</title><style>div.chart{height: 400px;width: 300px;position: absolute;top: 100px;left: 100px;}</style>
</head>
<body><div class="chart"><canvas id="canvas"></canvas></div><script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script><script>var ctx = document.getElementById('canvas').getContext('2d');var chart = new Chart(ctx,{type: 'line',data:{labels: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],datasets: [{label: '红线',data: [65,21,34,67,56,12,54,78,90,10,12,76],borderColor: 'rgba(255,0,0,1)',backgroundColor: 'rgba(255,0,0,0.5)',fill: false,lineTension: 0,},{label: '蓝线',data: [34,80,29,76,23,89,12,67,77,12,94,45],borderColor: 'rgba(75,193,193,1)',backgroundColor: 'rgba(75,193,193,1)',fill: false,lineTension: 0,}],},options:{}});</script>
</body>
</html>
4.图表的配置
chart.js的设置图表配置分为 图表全局配置 和 图表独立配置
图表独立配置
var options = {title :{display: true,text: '这是图表的标题!',}};var myDoughnutChart = new Chart(ctx, {type: 'doughnut',data: data,options: options});
图表全局配置
Chart.defaults.global.title.display = true;Chart.defaults.global.title.text = '这是图表的标题';
二、chartist.js
chart,js我们不仅要设置数据，同样也要设置样式。
而chartist.js只需要引入css和js设置数据即可，配置简单，使用起来比chart.js简单。（我感觉图表的样式还行，不算特别惊艳）
官网 http://gionkunz.github.io/chartist-js/
三、HighCharts.js
官网 http://www.hightcharts.com/
HTML5——Canvas图表插件 chart.js的基础使用相关推荐
- 图表插件 - chart.js (柱状图) 学习总结
chart.js 基于H5的canvas,轻量级的图表插件. 有6中图表类型:折线图.条形图.雷达图.饼图.柱状图.极地区域图 关于柱状图的绘制,追加 .更新.删除数据等操作的总结 原文来自于:htt ...
- HTML5 CANVAS 弹幕插件--DanMuer.js（V3.2.5）
最新版本 V 3.2.5 新增了图片弹幕类型,修改了demo展示页面,调整了部分代码,具体请参看git里的CHANGELOG.md和README.md 文章里主要讲实现方法和设计思想,所以有部分接口依 ...
- html 圆圈图表插件,10款HTML5动画图表插件
创建一个HTML5网页图表应用已经非常简单,利用Canvas更是能绘制出绚丽的动画效果,也就是说你的HTML5图表能动起来,给人不一样的用户体验.本文就主要来分享一些最常用的HTML5图表插件,不仅外 ...
- html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
- html5 地图效果,html5 echarts图表插件炫光的分布地图动画特效
特效描述:图表插件 炫光的动画 分布地图动画 动画特效.html5地图动画,html5 echarts图表插件 代码结构 1. 引入JS 2. HTML代码 ECharts $('#documen ...
- 基于html5 Canvas图表库 : ECharts
基于html5 Canvas图表库 : ECharts 分类 编程技术 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生 ...
- 统计图表插件Chart.js（前端常用图表）
官方文档:https://chartjs.bootcss.com/docs/ 图表JS: <script src="Chart.js"></script> ...
- html真实雾效果图,HTML5 Canvas逼真烟雾效果js插件解析
简要教程 smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件.通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果. 使用方法 在页面中引入smoke.js文件. HTML结 ...
- echart图片库_基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
最新文章
- vmware虚拟机异常关闭处理
- list对象排序java_【Java】list对象（类）按某个属性排序
- 单身萌妹纸手把手教你用产品思维追女生
- ipa文件怎么安装到iphone_无视签名随意安装 IPA 文件
- 面试题之发散思维能力：如何用非常规方法求1+2+···+n
- 【Docker系列教程之一】docker入门
- 2021年前端还好找工作吗？
- 1.3、解析并创建ApplicationListener（ok）
- python需要下载哪些软件-80%的人都不知道，全球Python库下载前10名
- HTML基金会2----联系,像, 第,对齐
- 系统架构师考试经验分享
- 多无人机协同三维路径规划的蛇优化算法Snake Optimizer（提供MATLAB代码）
- ENVI学习总结——基于改进的 CASA 模型反演NPP
- 互联网域名管理办法发布 域名注册必须实名
- 光滑曲线_高等数学八：（3）曲线积分与路径无关的条件
- 文献【综述】Hallmarks of Cancer: The Next Generation 肿瘤的新十大特征
- ios html js调用陀螺仪,Js 获取手机陀螺仪
- Dubbo之——Dubbo服务集群
- 相关搜索词的一种粗排方法
- MySQL调优系列：如何正确的使用MySQL索引