如何使用 jQuery Mobile 创建条形图标？(1)

📌 相关文章

📜 如何使用 jQuery Mobile 创建条形图标？(1)

📅 最后修改于: 2023-12-03 15:38:03.497000 🧑 作者: Mango

如何使用 jQuery Mobile 创建条形图标？

在 web 开发中，条形图常常用于展示数据，如何使用 jQuery Mobile 在网页中创建一个简单的条形图？以下是步骤及示例代码。

步骤

引入 jQuery Mobile 库文件，在 HTML 中添加以下代码：

<head>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

在 HTML 中添加一个 DIV 元素作为条形图的容器，并设置样式：

<div id="chart" style="width: 300px; height: 200px; background-color: lightgray;"></div>

使用 JavaScript/jQuery 创建条形图的数据：

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 }
];

其中，每个数据项包括名称和值两个属性。

使用 jQuery Mobile 的 listview 组件渲染数据：

var list = $('<ul data-role="listview"></ul>');
for (var i = 0; i < data.length; i++) {
  var name = data[i].name;
  var value = data[i].value;
  var item = $('<li><h2>'+name+'</h2><div class="ui-li-count">'+value+'</div></li>');
  list.append(item);
}
$('#chart').append(list);
list.listview();

其中，$('<ul>') 创建一个列表对象，$('<li>') 创建列表项，$('#chart').append(list) 将列表添加到容器中，list.listview() 调用 jQuery Mobile 的 listview 组件使列表生效。

根据数值大小调整列表项高度：

var max = 0;
$.each(data, function (i, item) {
  max = Math.max(max, item.value);
});
var height = $('#chart').height();
$('li', list).each(function (i) {
  var ratio = data[i].value / max;
  var itemHeight = height * ratio;
  $('h2', this).css('line-height', itemHeight+'px');
  $('div.ui-li-count', this).css('line-height', itemHeight+'px');
});

其中，$.each() 循环遍历所有数据项，获取最大值。然后根据每个数据项和最大值的比例计算列表项高度，并将文字内容的 line-height 值设置为列表项高度。

最终效果如下图所示：

jQuery Mobile 条形图

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile 条形图</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  
<div data-role="page">
  <div data-role="header">
    <h1>jQuery Mobile 条形图</h1>
  </div>
  
  <div role="main" class="ui-content">
    <div id="chart" style="width: 300px; height: 200px; background-color: lightgray;"></div>
  </div>
</div>

<script>
var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 }
];

var list = $('<ul data-role="listview"></ul>');
for (var i = 0; i < data.length; i++) {
  var name = data[i].name;
  var value = data[i].value;
  var item = $('<li><h2>'+name+'</h2><div class="ui-li-count">'+value+'</div></li>');
  list.append(item);
}
$('#chart').append(list);
list.listview();

var max = 0;
$.each(data, function (i, item) {
  max = Math.max(max, item.value);
});
var height = $('#chart').height();
$('li', list).each(function (i) {
  var ratio = data[i].value / max;
  var itemHeight = height * ratio;
  $('h2', this).css('line-height', itemHeight+'px');
  $('div.ui-li-count', this).css('line-height', itemHeight+'px');
});
</script>

</body>
</html>

以上是使用 jQuery Mobile 创建条形图的详细步骤及示例代码。