jQWidgets jqxChart hideSerie() 方法(1)

📌 相关文章

📜 jQWidgets jqxChart hideSerie() 方法(1)

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

jQWidgets jqxChart hideSerie() 方法介绍

简介

jQWidgets是一套基于jQuery的UI组件库，其中包含了jqxChart组件。jqxChart是一款用于创建图表的组件，支持多种类型的图表，如线图、柱状图、饼图等。hideSerie() 方法是jqxChart组件中提供的一个方法，其作用是隐藏或显示图表中的一个或多个系列。

语法

$("#chart").jqxChart('hideSerie', serieIndex, state);

参数

serieIndex：要隐藏或显示的系列的索引值，可以是一个数组，表示同时操作多个系列。
state：是否隐藏系列，取值为 true（隐藏）或 false （显示）。

示例

以下示例将创建一个饼图，并提供一个按钮，当点击按钮时，隐藏/显示第二个系列。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqxChart hideSerie() 方法示例</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/scripts/jqx-all.js"></script>
    <script>
        $(document).ready(function () {
            // 数据源
            var source =
            {
                datatype: "csv",
                datafields: [
                    {name: 'Browser'},
                    {name: 'Share'}
                ],
                url: 'data.csv'
            };
            // 绑定数据源
            var dataAdapter = new $.jqx.dataAdapter(source, {async: false, autoBind: true, loadError: function(xhr, status, error) { alert('加载数据出错！');}});
            // 创建饼图
            $("#chart").jqxChart({
                title: "Browser Market Share",
                description: "Internet Explorer is losing market share",
                enableAnimations: true,
                showLegend: true,
                showToolTips: true,
                seriesGroups: [
                    {
                        type: 'pie',
                        showLabels: true,
                        series: [
                            {
                                dataField: 'Share',
                                labelRadius: 100,
                                initialAngle: 15,
                                radius: 130,
                                centerOffset: 0,
                                formatSettings: {sufix: '%'},
                                displayText: 'Browser',
                                labelLinesEnabled: true,
                                labelLinesAngles: [0],
                                labelsAutoRotate: true
                            },
                            {
                                dataField: 'Share',
                                displayText: 'Browser',
                                showLabels: false
                            }
                        ]
                    }
                ]
            });
            // 创建按钮
            $("#button").jqxButton({width: '100px'});
            // 点击按钮时隐藏/显示第二个系列
            $("#button").on("click", function () {
                var state = $("#chart").jqxChart('getSerieVisibility', 1);
                $("#chart").jqxChart('hideSerie', 1, !state);
            });
        });
    </script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <br>
    <div style="text-align:center">
        <input type="button" value="Hide/Show Series 2" id="button" />
    </div>
</body>
</html>

注意事项

要使用 hideSerie() 方法，需要先创建 jqxChart 对象。
要获取一个系列的索引值，可以使用 getSerieProperty() 方法获取系列属性（如 dataField），然后根据属性值来确定其索引值。