📅  最后修改于: 2023-12-03 15:29:57.906000             🧑  作者: Mango
本模板为使用Chartjs制作图表的模板,使用jQuery和HTML来实现。Chartjs提供了一个易于使用的JavaScript库,可以方便地创建多种类型的图表。
以下示例为柱状图的一个例子:
<!DOCTYPE html>
<html>
<head>
<title>Chart.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
<script>
$(document).ready(function () {
var ctx = $('#myChart')[0].getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'My First Dataset',
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
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
</script>
</body>
</html>
以上代码会生成一个柱状图,如下所示:
cdnjs.cloudflare.com
和jquery.com
提供的链接。 canvas
元素,将其放置在一个div
元素中,并指定其宽度为75%。<script>
标签中使用jQuery选择器获取canvas
元素的上下文,并使用它来创建一个新的Chart实例。 data
属性中,我们指定了标签数组和DataSets数组。该DataSets数组包含有关图表数据和外观的详细信息。此处的dataset
使用了背景颜色和边框颜色来区分不同的条目。