chart.js demo

最新推荐文章于 2022-02-27 13:52:49 发布
最新推荐文章于 2022-02-27 13:52:49 发布
阅读量548 收藏 3
点赞数
分类专栏： js/jq/h5/cs3 文章标签： char.js demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27517377/article/details/107313425
版权

chart.js  demo

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Chart.js - Html5 chart plugins</title>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.0.0-alpha/Chart.min.js"></script>
	</head>
 
	<body>
 
		<div class="container">
			<h1 class="text-center">Chart.js</h1>
		</div>
 
		<div class="container" style="width:700px;margin:0 auto;">
			<div class="row">
				<div class="col-sm-6">
					<h2 class="text-center">Line Chart</h2>
					<canvas id="lines-graph"></canvas>
				</div>
				<div class="col-sm-6">
					<h2 class="text-center">Bars Chart</h2>
					<canvas id="bars-graph"></canvas>
				</div>
				
				<div class="w-100"></div>
				<div class="col-sm-6">
					<h2 class="text-center">Pie Charts</h2>
					<canvas id="pie-graph"></canvas>
				</div>
				<div class="col-sm-6">
					<h2 class="text-center">Doughnut Charts</h2>
					<canvas id="doughnut-graph"></canvas>
				</div>
				
				<div class="col-sm-6">
					<h2 class="text-center">Bars Chart2</h2>
					<canvas id="barsChart2"></canvas>
				</div>
				
				<div class="col-sm-6">
					<h2 class="text-center">Line Chart2</h2>
					<canvas id="lineChart2"></canvas>
				</div>
				
			</div>
		</div>
 
		<script>
			// Data for line charts
			var lineChartData = {
				labels: ["January", "February", "March", "April", "May", "June", "July"],
				datasets: [{
					label: "My First dataset",
					fill: false,
					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: "red",
					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],
					spanGaps: false,
				}]
			};
			var ctx = document.getElementById("lines-graph").getContext("2d");
			var LineChart = new Chart(ctx, {
				type: 'line',
				data: lineChartData,
				responsive: true,
				bezierCurve: false
			});
			// Bar Charts
			var barChartData = {
				labels: ["January", "February", "March", "April", "May", "June", "July","Aug.","Sep.","Oct.","Nov.","Dec."],
				datasets: [{
					label: "My First dataset",
					backgroundColor: [
						'rgba(255, 99, 132, 0.8)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(153, 102, 255, 0.8)',
						'rgba(255, 159, 64, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(153, 102, 255, 0.8)',
						'rgba(255, 159, 64, 0.8)',
					],
					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)',
						'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,50, 48, 80, 99, 56, 67, 39],
				}]
			};
			var ctx = document.getElementById("bars-graph").getContext("2d");
			var BarChart = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				responsive: true
			});
			// Data for pie chart
			var pieData = {
				labels: [
					"Red",
					"Blue",
					"Yellow"
				],
				datasets: [{
					data: [300, 50, 100],
					backgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					],
					hoverBackgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					]
				}]
			};
			var ctx = document.getElementById("pie-graph").getContext("2d");
			var PieChart = new Chart(ctx, {
				type: 'pie',
				data: pieData
			});
			// Data for doughnut chart
			var doughnutData = {
				labels: [
					"Red",
					"Blue",
					"Yellow"
				],
				datasets: [{
					data: [300, 50, 100],
					backgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					],
					hoverBackgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					]
				}]
			};
			var ctx = document.getElementById("doughnut-graph").getContext("2d");
			var DoughnutChart = new Chart(ctx, {
				type: 'doughnut',
				data: doughnutData,
				responsive: true
			});
		</script>
		
		<script>
			// Bar Charts2
			var barChartData = {
				labels: ["January", "February", "March", "April", "May", "June", "July","Aug.","Sep.","Oct.","Nov.","Dec."],
				datasets: [{
					label: "My First dataset",
					backgroundColor: [
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
						'rgba(255, 99, 132, 0.8)',
					],
					data: [65, 59, 80, 81, 56, 55, 40,50, 48, 80, 99, 56, 67, 39],
				},
				{
					label: "My Second dataset",
					backgroundColor: [
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
						'rgba(54, 162, 235, 0.6)',
					],
					data: [49, 65, 65, 88, 76, 59, 80,97, 87, 56, 68, 85, 65, 80],
				},
				{
					label: "My Third dataset",
					backgroundColor: [
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
						'rgba(255, 206, 86, 0.8)',
					],
					data: [65, 76, 59, 99, 66, 78, 55,77, 45, 77, 84, 59, 64, 89],
				},
				{
					label: "My Forth dataset",
					backgroundColor: [
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
						'rgba(75, 192, 192, 0.8)',
					],
					data: [55, 76, 85, 45, 64, 12, 44,70, 88, 56, 46, 70, 55, 64],
				}
				]
			};
			var ctx = document.getElementById("barsChart2").getContext("2d");
			var BarChart = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				responsive: true
			});
			
			// Data for line charts2
			var lineChartData = {
				labels: ["January", "February", "March", "April", "May", "June", "July"],
				datasets: [{
					label: "My First dataset",
					fill: false,
					lineTension: 0.1,
					borderColor: "rgba(75,192,192,0.4)",//线条颜色
					pointBackgroundColor: "red",//鼠标移动上去的背景颜色
					borderCapStyle: 'butt',
					borderDash: [],
					borderDashOffset: 0.0,
					borderJoinStyle: 'miter',
					pointBorderWidth: 3,
					pointHoverRadius: 5,
					pointHoverBorderWidth: 2,
					pointRadius: 1,
					pointHitRadius: 10,
					data: [65, 78, 88, 102, 137, 152, 169],
					spanGaps: false,
				},{
					label: "My Second dataset",
					fill: false,
					lineTension: 0.1,
					borderColor: "rgba(255, 206, 86, 0.8)",//线条颜色
					pointBackgroundColor: "red",//鼠标移动上去的背景颜色
					borderCapStyle: 'butt',
					borderDash: [],
					borderDashOffset: 0.0,
					borderJoinStyle: 'miter',
					pointBorderWidth: 3,
					pointHoverRadius: 5,
					pointHoverBorderWidth: 2,
					pointRadius: 1,
					pointHitRadius: 10,
					data: [35, 45, 66, 79, 99, 110, 140],
					spanGaps: false,
				},{
					label: "My Third dataset",
					fill: false,
					lineTension: 0.1,
					borderColor: "rgba(255, 99, 132, 0.8)",//线条颜色
					pointBackgroundColor: "red",//鼠标移动上去的背景颜色
					borderCapStyle: 'butt',
					borderDash: [],
					borderDashOffset: 0.0,
					borderJoinStyle: 'miter',
					pointBorderWidth: 3,
					pointHoverRadius: 5,
					pointHoverBorderWidth: 2,
					pointRadius: 1,
					pointHitRadius: 10,
					data: [55, 86, 97, 130, 156, 159, 149],
					spanGaps: false,
				}]
			};
			var ctx = document.getElementById("lineChart2").getContext("2d");
			var LineChart = new Chart(ctx, {
				type: 'line',
				data: lineChartData,
				responsive: true,
				bezierCurve: false
			});
		</script>
		
	</body>
 
</html>

 

或非与
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Chart.js图形报表
04-28
基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用
ChartJS学习
10-11
看到网上很少有ChartJS的教程，就看了下官方文档写了个很全的demo，里面注释都改为了中文，可以直接使用
Chart js Demo
01-29
版本1.0.1.4，添加了鼠标点击事件，将曲线改为折线
Chart.js功能与使用方法小结
11-21
本文实例讲述了Chart.js功能与使用方法。分享给大家供大家参考，具体如下： 官方文档 英文文档 https://www.chartjs.org/docs/2.8.0/ 中文文档 https://chartjs-doc.abingoal.com 在react中的使用 开始使用 npm install chart.js --save 在相应的页面中引入 chartjs import Chart from "chart.js" 先写一个小的demo import React from "react"; import ReactDOM from "react-dom"; import C
Chart.js-2.7.2 全部资料
04-23
chart.js v2.7.2 全部资料 这个是目前最新版，与旧版例程有了很大的变化，值得一看。 内含多个完整的官方demo，包括静态和动态。
10个Chart.js示例图表
allway2的博客
11-23 3309
Chart.js是一个功能强大的数据可视化库，但是我从经验中知道，开始并获取要显示的图形可能很棘手。各种各样的事情都可能出错，而我通常只是想让某些事情起作用，所以我可以开始进行调整。 这是一个包含10种工作图（条形图，饼图，折线图等）的列表，其中设置了颜色和数据以呈现美观的图表，您可以将其复制并粘贴到自己的项目中，并快速进行自定义和进行微调以使其适合您的风格和目的。 要使用这些示例，请确保还包括Chart.js： <script src="https://cdnjs.cloudflare....
chart.js操作实例（前后台互通）
刘鹏的技术宅
08-12 9802
SpringMVC的controller层： /** * 查询得到财务信息报表 * @author liupeng * @param request * @return * @throws UnknownHostException * @throws ParseException */ @RequestMapping(value="/innerChartOutFo
Chart.js 使用示例
Angel_G的博客
05-11 2939
从MySQL 数据库中获取数据 ，利用chart.js 绘制柱形图。 文件结构： 1.index.PHP文件。从数据库获取数据。先连接数据库exercisedata，然后从数据库的users表中查询学生名字userName和学生的成绩score，并给userName和score取别名label和value，以符合chart.js中绘制图形时需要的数据格式。执行sql语
Chart.js案例
09-13
chart.js是一款基于HTML5 Canvas的图表插件，其功能非常强大，不仅提供了常见的柱形图、折线图、饼状图，还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。
chart.js中用ajax,Chart.js功能与使用方法小结
weixin_28969555的博客
08-05 375
本文实例讲述了Chart.js功能与使用方法。分享给大家供大家参考，具体如下：官方文档在react中的使用开始使用npm install chart.js --save在相应的页面中引入 chartjsimport Chart from "chart.js"先写一个小的demoimport React from "react";import ReactDOM from "react-dom";im...
chart.js v2.5.0 全部资料
05-14
chart.js v2.5.0 全部资料 这个是目前最新版，与旧版例程有了很大的变化，值得一看。 内含多个完整的官方demo，包括静态和动态。
chartjs-node-demo:Chartjs节点演示服务器
05-17
chartjs-node-demo 的演示服务器
Chart.js DEMO.mhtml
08-03
Chart.js can be used with ES6 modules, plain JavaScript and module loaders. #资源达人分享计划
Chart.js演示7种不同的统计图
09-04
Chart.js演示7种不同的统计图
Chart.js学习资料实例案例
10-26
Chart.js学习资料实例，全部资料 这个是目前最新版，与旧版例程有了很大的变化，值得一看。 内含多个完整的demo，包括静态和动态。chart.js是一款基于HTML5 Canvas的图表插件，其功能非常强大，不仅提供了常见的柱形图、折线图、饼状图，还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新
php返回json对象给前端
热门推荐
或非与博客
01-29 2万+
    开发中经常碰到php返回json数据给前端的情况,直接echo json_encode('xxxx'); 这样子返回的话，默认：Content-Type:text/html; charset=UTF-8 是这样的，那么我们只需要改变header头为json的类型,那么就可以实现php返回的数据直接是json类型了。 /** * ajax数据返回json数据成功 */ functio...
vue3 setup 父组件向子组件传递参数、方法
或非与博客
02-27 2万+
vue3 setup 父组件向子组件传递参数，父组件向各子孙节点传递参数
ckeditor5 图片上传,tp5整合ckeditor5编辑器使用
或非与博客
06-20 1万+
声明：所发文章楼主亲测并在实际项目中使用的，引入编辑器的时候碰到了不少坑，为了记录一下，让自己以后再次使用可以直接ctrl+c ctrl+v而写，如果这篇文章对你有用就最好了 背景：在编辑器使用的时候最开始是用的wangeditor，主要原因是这货非常轻量，体积超级小，但是由于公司的同事经常添加内容都是在word文档直接复制粘贴的，有很多垃圾样式wangeditor无法过滤，这个问题搞得我好烦，...
怎么使用github的js文件,css文件
或非与博客
01-29 5457
今天整理博客的时候发现一遍文章关于“ckeditor5 图片上传,tp5整合ckeditor5编辑器使用”发现之前上传到某云的ckeditor.js已经无法使用了，于是想要不直接放我自己用来测试的服务器吧，仔细想下算了，放自己的服务器我会各种折腾服务器的，不如直接放gitbug吧！ so就有了这篇文章：怎么引用gitbub的js文件。       首先把你需要的静态文件上传到gitbub，注册...
给一个demo示例，在vue3+vite小程序中，使用Chart.js插件， 用pnpm install Chart.js的方式使用，并在项目中配置Chart.js，vue页面中<script setup lang="ts"></script>
最新发布
07-15
当使用 Vue 3 + Vite 创建小程序项目时，可以按照以下步骤使用 Chart.js 插件，并在项目中进行配置： 1. 首先，在终端中进入 Vue 3 + Vite 项目的根目录。 2. 执行以下命令安装 Chart.js： ```bash pnpm install ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值