html chart.js插件的应用快速 绘制图表
程序员文章站
2024-01-17 23:42:22
...
最近在做项目的时候遇到了，html中绘制图表，本想用AdminTLE中的图表框架，查了好多，最后查到了一个专门的插件chart.js，API开发文档，使用非常的方便。
DEMO演示
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/amazeui.min.css"/>
<script src="assets/js/Chart.min.js"></script>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
</head>
<body>
<div>TODO write content</div>
<div class="chart" style="height: 250px;width: 800px;">
<canvas id="pieChart" style="height: 250px;">
</canvas>
</div>
<script>
var char_test = document.getElementById('pieChart').getContext('2d');
var myChart = new Chart(char_test, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'fafaf',
data: [12, 19, 3, 5, 2, 3],
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,
hoverBorderWith: 2,
hoverBorderColor: '#000'
}]
},
options: {
title: {
display: true,
text: 'fafafafafa'
},
legend: {
position: 'right',
display: true,
labels: {
fontColot: '#000'
}
},
layout: {
},
tooltips: {
enable: true
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
}
}
});
</script>
</body>
</html>
该API提供了，多种图表，具体可以查API开发文档，详细说明。