📌  相关文章
📜  如何使用 jQuery Mobile 创建条形图标？(1)

📅  最后修改于: 2023-12-03 14:51:56.871000             🧑  作者: Mango

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

简介

jQuery Mobile 是一个基于 HTML5 的 UI 框架，提供了丰富的移动端 UI 组件。其中包含了创建图表的组件，本文将介绍如何使用 jQuery Mobile 创建条形图表。

步骤
第一步：创建 HTML 页面
<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart</title>
    <meta charset="utf-8">
    <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>Bar Chart</h1>
    </div>

    <div data-role="main" class="ui-content">
        <div id="chart" style="height: 300px;"></div>
    </div>

    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>

</div>

</body>
</html>
第二步：引入 Highcharts 库
<script src="https://code.highcharts.com/highcharts.js"></script>
第三步：创建条形图表
$(function () {
    $('#chart').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
});
总结

以上就是使用 jQuery Mobile 创建条形图表的方法。利用 Highcharts 库提供的 API，我们可以轻松地创建出丰富多彩的图表效果，为移动端应用提供更好的交互体验。