以下是使用Chart.js库绘制一个简单的柱状图的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery绘制图表示例</title>
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入Chart.js库 -->
<script src="https://cdn.bootcss.com/Chart.js/3.3.2/chart.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script type="text/javascript">
$(function () {
// 定义数据源
var data = {
labels: ['苹果', '梨子', '香蕉', '橙子', '草莓'],
datasets: [
{
label: '水果销量',
data: [12, 19, 3, 5, 2],
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)'
],
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)'
],
borderWidth: 1
}
]
};
// 使用Chart.js库绘制柱状图
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>在上面的代码中，我们使用了Chart.js库来绘制柱状图，并使用了jQuery库来简化代码的书写。具体来说，我们先定义了数据源，包括标签和数据，然后在$(function(){})中使用new Chart()来绘制图表，其中type指定了图表类型为柱状图，data指定了数据源，options指定了一些绘图选项，例如是否从0开始，以及坐标轴的样式等。最终，我们在<canvas>元素中插入图表，并通过CSS设置了它的宽度和高度。
正文完