jQWidgets jqxChart refresh() 方法(1)

📌 相关文章

📜 jQWidgets jqxChart refresh() 方法(1)

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

jQWidgets jqxChart refresh() 方法

refresh() 方法是 jQWidgets 中 jqxChart 组件提供的一个用于刷新图表内容的方法，当图表内容发生改变时可以通过该方法来更新图表。本文将介绍该方法的使用方式以及示例代码。

使用方法

// 获取 jqxChart 实例对象
var chart = $("#jqxChart").jqxChart('getInstance');

// 调用 refresh() 方法刷新图表内容
chart.refresh();

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQWidgets jqxChart refresh() 方法示例</title>

<!-- 引入 jQWidgets 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css" type="text/css" />

<!-- 引入 jQWidgets 脚本文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxchart.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    // 创建 jqxChart 实例
    var chart = $("#jqxChart").jqxChart({
        title: { text: "jQWidgets jqxChart refresh() 示例" },
        description: { text: "点击按钮，修改数据源，然后调用 refresh() 方法刷新图表内容。" },
        enableAnimations: true,
        showLegend: true,
        padding: { left: 5, top: 5, right: 5, bottom: 5 },
        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
        source: [
            { "年份": "2015", "销售额": 125000 },
            { "年份": "2016", "销售额": 252000 },
            { "年份": "2017", "销售额": 650000 },
            { "年份": "2018", "销售额": 420000 },
            { "年份": "2019", "销售额": 325000 },
            { "年份": "2020", "销售额": 580000 }
        ],
        categoryAxis: {
            dataField: '年份',
            showGridLines: true
        },
        valueAxis: {
            unitInterval: 100000,
            minValue: 0,
            maxValue: 700000,   
            displayValueAxis: true,
            description: '销售额（单位：元）',
            axisSize: 'auto'
        },
        seriesGroups:
        [
            {
                type: 'column',
                series: [
                    { dataField: '销售额', displayText: '销售额' }
                ]
            }
        ]
    });

    // 绑定按钮点击事件
    $("#btnRefresh").click(function () {
        // 修改数据源
        chart.source([
            { "年份": "2015", "销售额": Math.floor(Math.random() * (200000 - 10000 + 1)) + 10000 },
            { "年份": "2016", "销售额": Math.floor(Math.random() * (400000 - 50000 + 1)) + 50000 },
            { "年份": "2017", "销售额": Math.floor(Math.random() * (800000 - 100000 + 1)) + 100000 },
            { "年份": "2018", "销售额": Math.floor(Math.random() * (600000 - 10000 + 1)) + 10000 },
            { "年份": "2019", "销售额": Math.floor(Math.random() * (500000 - 10000 + 1)) + 10000 },
            { "年份": "2020", "销售额": Math.floor(Math.random() * (900000 - 10000 + 1)) + 10000 }
        ]);

        // 调用 refresh() 方法刷新图表内容
        chart.refresh();
    });
});
</script>
</head>
<body>
    <div id="jqxChart" style="width:600px; height:400px;"></div>

    <hr />

    <button id="btnRefresh">修改数据源并刷新图表</button>
</body>
</html>

运行效果

jQWidgets jqxChart refresh() 方法示例运行效果