master

Branches (3)

Manage

Manage

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_js_chartjs.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>chartjs - 光年(Light Year Admin V4)后台管理系统模板</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
		<meta name="author" content="yinqi">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="callout callout-info mb-3">
				<span>插件使用chart.js v3.0.0，查看中文文档：</span>
				<a href="http://chartjs.cn/docs/" target="_blank">chart.js</a>
				<span> - </span>
				<a href="https://chartjs.bootcss.com/docs/" target="_blank">chart.js(Gitbook)</a>
			</div>

			<div class="callout callout-info mb-3">
				<span>以下示例主要演示视图数据更新、获取视图Base64编码操作 更多使用参考官方文档 - Written by SouthwWan</span>
			</div>

			<div class="callout callout-info mb-3">
				<!-- 触发图表的更新。这可以在更新数据对象之后安全地调用。这将更新所有的比例，图例，然后重新渲染图表。 -->
				<button class="btn btn-primary btn-w-md" type="button" onclick="updatedLineChart1()">[线形图 - 1]</button>
				<button class="btn btn-primary btn-w-md" type="button" onclick="updatedLineChart3()">[线形图 - 3]</button>
				<!-- 返回当前状态的图表的基本 64 位编码字符串 -->
				<button class="btn btn-primary btn-w-md" type="button" onclick="toBase64Image()">[ToBase64]</button>
			</div>

			<div class="row">

				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">线形图 - 1</div>
						</header>
						<div class="card-body">
							<canvas id="chart-line-1" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">线形图 - 2</div>
						</header>
						<div class="card-body">
							<canvas id="chart-line-2" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">线形图 - 3</div>
						</header>
						<div class="card-body">
							<canvas id="chart-line-3" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">线形图 - 4</div>
						</header>
						<div class="card-body">
							<canvas id="chart-line-4" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">面积图 - 1</div>
						</header>
						<div class="card-body">
							<canvas id="chart-area-1" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">面积图 - 2</div>
						</header>
						<div class="card-body">
							<canvas id="chart-area-2" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">垂直条形图 - 1</div>
						</header>
						<div class="card-body">
							<canvas id="chart-vbar-1" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">垂直条形图 - 2</div>
						</header>
						<div class="card-body">
							<canvas id="chart-vbar-2" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">水平条形图 - 1</div>
						</header>
						<div class="card-body">
							<canvas id="chart-hbar-1" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">水平条形图 - 2</div>
						</header>
						<div class="card-body">
							<canvas id="chart-hbar-2" width="400" height="250"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">饼图</div>
						</header>
						<div class="card-body">
							<canvas id="chart-pie" width="280" height="280"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">环形图</div>
						</header>
						<div class="card-body">
							<canvas id="chart-doughnut" width="280" height="280"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">雷达图</div>
						</header>
						<div class="card-body">
							<canvas id="chart-radar" width="360" height="360"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">极区图</div>
						</header>
						<div class="card-body">
							<canvas id="chart-polar" width="360" height="360"></canvas>
						</div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="card">
						<header class="card-header">
							<div class="card-title">气泡图</div>
						</header>
						<div class="card-body">
							<canvas id="chart-bubble" width="280" height="280"></canvas>
						</div>
					</div>
				</div>

			</div>

		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/Chart.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>
		<script type="text/javascript">
			var chartline1 = new Chart($("#chart-line-1"), {
				type: 'line',
				data: {
					labels: ["一月", "二月", "三月", "四月"],
					datasets: [{
						label: "收入",
						fill: false,
						borderWidth: 3,
						pointRadius: 0,
						data: [30, 25, 35, 23]
					}]
				},
				options: {
					legend: {
						display: false
					},
				}
			});

			function updatedLineChart1() {
				// 设置需要更新的属性 设置完成后调用 update 方法触发视图更新
				chartline1.data.labels = ['January', 'February', 'March', 'April'];
				chartline1.data.datasets[0].data = [100, 20, 36, 77];
				chartline1.update();
			}

			function toBase64Image(){
				// 内容将会在控制台输出
				console.log(chartline1.toBase64Image());
			}

			new Chart($("#chart-line-2"), {
				type: 'line',
				data: {
					labels: ["一月", "二月", "三月", "四月"],
					datasets: [{
						label: "收入",
						fill: false,
						borderWidth: 3,
						pointRadius: 5,
						borderColor: "#9966ff",
						pointBackgroundColor: "#9966ff",
						pointBorderColor: "#9966ff",
						pointHoverBackgroundColor: "#fff",
						pointHoverBorderColor: "#9966ff",
						data: [30, 25, 35, 23]
					}]
				},
				options: {
					legend: {
						display: false
					},
				}
			});

			var chartline3 = new Chart($("#chart-line-3"), {
				type: 'line',
				data: {
					labels: ["一月", "二月", "三月", "四月"],
					datasets: [{
							label: "收入",
							fill: false,
							backgroundColor: "#36a2eb",
							borderColor: "#36a2eb",
							borderWidth: 3,
							pointRadius: 0,
							data: [30, 25, 35, 23]
						},
						{
							label: "支出",
							fill: false,
							borderColor: "#ff6384",
							backgroundColor: "#ff6384",
							borderWidth: 3,
							pointRadius: 0,
							data: [23, 29, 30, 33]
						}
					]
				},
				options: {}
			});

			function updatedLineChart3() {
				// 多项仅需要设置对应的datasets[i]项即可
				chartline3.data.labels = ['January', 'February', 'March', 'April'];
				chartline3.data.datasets[0].data = [100, 20, 20, 100];
				chartline3.data.datasets[1].data = [20, 100, 100, 20];
				chartline3.update();
			}

			new Chart($("#chart-line-4"), {
				type: 'line',
				data: {
					labels: ["一月", "二月", "三月", "四月"],
					datasets: [{
							label: "收入",
							fill: false,
							borderWidth: 3,
							pointRadius: 4,
							borderColor: "#36a2eb",
							backgroundColor: "#36a2eb",
							pointBackgroundColor: "#36a2eb",
							pointBorderColor: "#36a2eb",
							pointHoverBackgroundColor: "#fff",
							pointHoverBorderColor: "#36a2eb",
							data: [30, 25, 35, 23]
						},
						{
							label: "支出",
							fill: false,
							borderWidth: 3,
							pointRadius: 4,
							borderColor: "#ff6384",
							backgroundColor: "#ff6384",
							pointBackgroundColor: "#ff6384",
							pointBorderColor: "#ff6384",
							pointHoverBackgroundColor: "#fff",
							pointHoverBorderColor: "#ff6384",
							data: [23, 29, 30, 33]
						}
					]
				},
				options: {}
			});

			new Chart($("#chart-area-1"), {
				type: 'line',
				data: {
					labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
					datasets: [{
						label: "收入",
						backgroundColor: "rgba(51,202,185,0.5)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)",
						data: [0, 59, 80, 58, 20, 55, 40]
					}]
				},
				options: {
					legend: {
						display: false
					},
				}
			});

			new Chart($("#chart-area-2"), {
				type: 'line',
				data: {
					labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
					datasets: [{
							label: "收入",
							backgroundColor: "rgba(51,202,185,0.5)",
							borderColor: "rgba(0,0,0,0)",
							pointBackgroundColor: "rgba(51,202,185,0.5)",
							pointBorderColor: "#fff",
							pointHoverBackgroundColor: "#fff",
							pointHoverBorderColor: "rgba(51,202,185,0.5)",
							data: [0, 59, 80, 58, 20, 55, 40]
						},
						{
							label: "支出",
							backgroundColor: "rgba(243,245,246,0.8)",
							borderColor: "rgba(0,0,0,0)",
							pointBackgroundColor: "rgba(243,245,246,0.8)",
							pointBorderColor: "#fff",
							pointHoverBackgroundColor: "#fff",
							pointHoverBorderColor: "rgba(243,245,246,0.8)",
							data: [28, 48, 40, 19, 86, 27, 90]
						}
					]
				},
				options: {}
			});

			new Chart($("#chart-vbar-1"), {
				type: 'bar',
				data: {
					labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
					datasets: [{
						label: "收入",
						backgroundColor: "rgba(51,202,185,0.5)",
						borderColor: "rgba(0,0,0,0)",
						hoverBackgroundColor: "rgba(51,202,185,0.7)",
						hoverBorderColor: "rgba(0,0,0,0)",
						data: [10, 59, 80, 58, 20, 55, 40]
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});

			new Chart($("#chart-vbar-2"), {
				type: 'bar',
				data: {
					labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
					datasets: [{
							label: "收入",
							backgroundColor: "rgba(51,202,185,0.5)",
							borderColor: "rgba(0,0,0,0)",
							hoverBackgroundColor: "rgba(51,202,185,0.7)",
							hoverBorderColor: "rgba(0,0,0,0)",
							data: [10, 59, 80, 58, 20, 55, 40]
						},
						{
							label: "支出",
							backgroundColor: "rgba(243,245,246,0.8)",
							borderColor: "rgba(0,0,0,0)",
							hoverBackgroundColor: "rgba(238,239,240,1)",
							hoverBorderColor: "rgba(0,0,0,0)",
							data: [28, 48, 40, 19, 86, 27, 90]
						}
					]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});

			new Chart($("#chart-hbar-1"), {
				type: 'horizontalBar',
				data: {
					labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
					datasets: [{
						label: "收入",
						backgroundColor: "rgba(51,202,185,0.5)",
						borderColor: "rgba(0,0,0,0)",
						hoverBackgroundColor: "rgba(51,202,185,0.7)",
						hoverBorderColor: "rgba(0,0,0,0)",
						data: [10, 59, 80, 58, 20, 55, 40]
					}]
				},
				options: {
					scales: {
						xAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});

			new Chart($("#chart-hbar-2"), {
				type: 'horizontalBar',
				data: {
					labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
					datasets: [{
							label: "收入",
							backgroundColor: "rgba(51,202,185,0.5)",
							borderColor: "rgba(0,0,0,0)",
							hoverBackgroundColor: "rgba(51,202,185,0.7)",
							hoverBorderColor: "rgba(0,0,0,0)",
							data: [10, 59, 80, 58, 20, 55, 40]
						},
						{
							label: "支出",
							backgroundColor: "rgba(243,245,246,0.8)",
							borderColor: "rgba(0,0,0,0)",
							hoverBackgroundColor: "rgba(238,239,240,1)",
							hoverBorderColor: "rgba(0,0,0,0)",
							data: [28, 48, 40, 19, 86, 27, 90]
						}
					]
				},
				options: {
					scales: {
						xAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});

			new Chart($("#chart-radar"), {
				type: 'radar',
				data: {
					labels: ["饮食", "饮酒", "睡眠", "设计", "编码", "骑行", "运动"],
					datasets: [{
							label: "张三",
							backgroundColor: "rgba(51,202,185,0.7)",
							borderColor: "rgba(0,0,0,0)",
							pointBackgroundColor: "rgba(51,202,185,0.7)",
							pointBorderColor: "#fff",
							pointHoverBackgroundColor: "#fff",
							pointHoverBorderColor: "rgba(51,202,185,0.7)",
							data: [65, 59, 90, 81, 56, 55, 40]
						},
						{
							label: "李四",
							backgroundColor: "rgba(72,176,247,0.7)",
							borderColor: "rgba(0,0,0,0)",
							pointBackgroundColor: "rgba(72,176,247,0.7)",
							pointBorderColor: "#fff",
							pointHoverBackgroundColor: "#fff",
							pointHoverBorderColor: "rgba(72,176,247,0.7)",
							data: [28, 48, 40, 19, 96, 27, 100]
						}
					]
				},
				options: {
					responsive: false,
					legend: {
						display: false
					}
				}
			});

			new Chart($("#chart-polar"), {
				type: 'polarArea',
				data: {
					datasets: [{
						data: [11, 16, 7, 3, 14],
						backgroundColor: ['rgba(255,99,132,0.95)', 'rgba(75, 192, 192, 0.95)',
							'rgba(255, 159, 64, 0.95)', 'rgba(231, 233, 237, 0.95)',
							'rgba(54, 162, 235, 0.95)'
						],
						label: 'My dataset' // for legend
					}],
					labels: ["红色", "绿色", "橙色", "灰色", "蓝色"]
				},
				options: {
					responsive: false,
					legend: {
						display: false
					}
				}
			});

			new Chart($("#chart-pie"), {
				type: 'pie',
				data: {
					labels: ["红色", "蓝色", "橙色"],
					datasets: [{
						data: [300, 50, 100],
						backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
					}]
				},
				options: {
					responsive: false
				}
			});

			new Chart($("#chart-doughnut"), {
				type: 'doughnut',
				data: {
					labels: ["红色", "蓝色", "橙色"],
					datasets: [{
						data: [300, 50, 100],
						backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
					}]
				},
				options: {
					responsive: false
				}
			});

			new Chart($("#chart-bubble"), {
				type: 'bubble',
				data: {
					datasets: [{
							label: '粉红色',
							data: [{
									x: 8,
									y: 24,
									r: 18
								},
								{
									x: 20,
									y: 30,
									r: 15
								},
								{
									x: 40,
									y: 10,
									r: 10
								}
							],
							backgroundColor: "#ff6384",
							hoverBackgroundColor: "#ff6384",
						},
						{
							label: '蓝色',
							data: [{
									x: 10,
									y: 35,
									r: 5
								},
								{
									x: 5,
									y: 5,
									r: 20
								},
								{
									x: 30,
									y: 15,
									r: 10
								}
							],
							backgroundColor: "#36a2eb",
							hoverBackgroundColor: "#36a2eb",
						},
						{
							label: '黄色',
							data: [{
									x: 17,
									y: 21,
									r: 8
								},
								{
									x: 25,
									y: 15,
									r: 12
								},
								{
									x: 12,
									y: 31,
									r: 16
								}
							],
							backgroundColor: "#ffce56",
							hoverBackgroundColor: "#ffce56",
						},
					]
				},
				options: {
					legend: {
						display: false
					},

					scales: {
						xAxes: [{
							ticks: {
								beginAtZero: true
							}
						}],
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});
		</script>
	</body>
</html>