📌  相关文章
📜  jQWidgets jqxBarGauge render() 方法(1)

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

jQWidgets jqxBarGauge render() 方法介绍

简介

jQWidgets jqxBarGauge render() 方法是一个JavaScript函数，用于将BarGauge控件渲染到浏览器页面上。

参数

render() 方法不接受任何参数。

返回值

无返回值。

使用方法

要使用 jqxBarGauge 的 render() 方法，需要先引入相关的 js 文件：

<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbargauge.js"></script>

然后，在HTML代码中添加一个

元素，作为 BarGauge 控件的容器：

<div id="jqxBarGauge"></div>

最后，在JavaScript代码中调用 render() 方法，将 BarGauge 控件渲染到页面上：

$("#jqxBarGauge").jqxBarGauge("render");
示例代码
<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxBarGauge render() 方法示例</title>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbargauge.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxBarGauge").jqxBarGauge({
                width: 200,
                height: 200,
                max: 100,
                value: 60,
                colorScheme: "scheme05",
                showRanges: true,
                ranges: [
                    { startValue: 0, endValue: 30, color: "#FF3019" },
                    { startValue: 30, endValue: 70, color: "#FFD919" },
                    { startValue: 70, endValue: 100, color: "#4BB648" }
                ]
            });
            $("#renderButton").click(function () {
                $("#jqxBarGauge").jqxBarGauge("render");
            });
        });
    </script>
</head>
<body>
    <div id="jqxBarGauge"></div>
    <button id="renderButton">渲染</button>
</body>
</html>
效果图

效果图