Chart.js使用

案例1

官网
代码案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            width: 400px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <canvas id="myChart"></canvas>
    </div>
      
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      
    <script>
        const ctx = document.getElementById('myChart');
      
        new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              borderWidth: 1
            }]
          },
          options: {
            scales: {
              y: {
                beginAtZero: true
              }
            }
          }
        });
    </script>      
</body>
</html>

效果图

案例2

极地图

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
</head>
<body>
 
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Red',
    'Green',
    'Yellow',
    'Grey',
    'Blue'
  ],
  datasets: [{
    label: '极地图实例',
    data: [11, 16, 7, 3, 14],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(75, 192, 192)',
      'rgb(255, 205, 86)',
      'rgb(201, 203, 207)',
      'rgb(54, 162, 235)'
    ]
  }]
};
const config = {
  type: 'polarArea',
  data: data,
  options: {
    responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio: false,// 保持图表原有比例
  }
};
const myChart = new Chart(ctx, config);
</script>
 
</body>
</html>

效果图

posted @ 2024-02-08 14:26 DogLeftover 阅读(57) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Chartist.js使用

· Chartist.js条形图

· Chart.js（未完）

· Chart.js (v2.9.4)概要介绍

· C# Chart 简单使用

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

Chart.js使用

案例1

案例2

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.d1{
	width: 400px;
	height: 350px;
	}
	</style>
	</head>
	<body>
	<div class="d1">
	<canvas id="myChart"></canvas>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

	<script>
	const ctx = document.getElementById('myChart');

	new Chart(ctx, {
	type: 'bar',
	data: {
	labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
	datasets: [{
	label: '# of Votes',
	data: [12, 19, 3, 5, 2, 3],
	borderWidth: 1
	}]
	},
	options: {
	scales: {
	y: {
	beginAtZero: true
	}
	}
	}
	});
	</script>
	</body>
	</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
	</head>
	<body>

	<canvas id="myChart" width="400" height="400"></canvas>
	<script>
	const ctx = document.getElementById('myChart');
	const data = {
	labels: [
	'Red',
	'Green',
	'Yellow',
	'Grey',
	'Blue'
	],
	datasets: [{
	label: '极地图实例',
	data: [11, 16, 7, 3, 14],
	backgroundColor: [
	'rgb(255, 99, 132)',
	'rgb(75, 192, 192)',
	'rgb(255, 205, 86)',
	'rgb(201, 203, 207)',
	'rgb(54, 162, 235)'
	]
	}]
	};
	const config = {
	type: 'polarArea',
	data: data,
	options: {
	responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
	maintainAspectRatio: false,// 保持图表原有比例
	}
	};
	const myChart = new Chart(ctx, config);
	</script>

	</body>
	</html>