利用jQuery创建简单的图表可以通过结合HTML、CSS和jQuery的DOM操作来实现。以下是一个创建简单柱状图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单柱状图</title>
<style>
  /* 样式表 */
  .chart {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 10px;
    box-sizing: border-box;
  }
  .bar {
    background-color: #007bff;
    margin-bottom: 5px;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="chart"></div>

<script>
$(document).ready(function(){
  // 数据
  var data = [5, 10, 15, 20, 25];

  // 创建柱状图
  for (var i = 0; i < data.length; i++) {
    var barHeight = data[i] * 5; // 柱状图高度根据数据动态计算
    var $bar = $('<div class="bar"></div>');
    $bar.css('height', barHeight + 'px');
    $('.chart').append($bar);
  }
});
</script>

</body>
</html>

在这个例子中，我们使用了jQuery库，并且在页面加载完成后，通过jQuery的 $(document).ready() 方法来执行柱状图的创建。数据存储在一个数组中，然后使用循环将每个数据点转换为一个柱状条，每个柱状条的高度根据数据动态计算。最后，我们将每个柱状条添加到具有 .chart 类的

元素中。

这只是一个简单的示例，你可以根据需求对图表进行扩展和定制。例如，你可以添加标签、轴线、动画效果等来提升图表的可读性和吸引力。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/uery.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！