博客

jQWidgets jqxChart hideSerie()方法

  • Post category:jquery

以下是关于“jQWidgets jqxChart hideSerie()方法”的完整攻略，包含两个示例说明：

简介

jqxChart 控件的 hideS() 方法用于隐藏图表中的一个或多个系列。通过调用 hideSerie() 方法，可以方便地隐藏图表中的指定列。

细攻略

以下是 jqxChart 控件 hideSerie() 方法的详细攻略：

hideSerie() 方法

hideSerie() 方法是 jqxChart 控件的一个方法，用于隐藏图表中的一个或多个系列。该方法接受一个或多个整数类型的参数，表示要隐藏的系列的索引。

// 隐藏第一个系列
$("#jqxchart").jqxChart('hideSerie', 0);
// 隐藏第一个和第二个系列
$("#jqxchart").jqxChart('hideSerie', [0, 1]);

在上述代码中，我们使用 hideSerie() 方法隐藏了 jqxChart 控件中的一个或多个系列。在第一个示例中，我们隐藏了第一个系列，而在第二个示例中，我们隐藏了第一个和第二个系列。

示例1

在此示例中，我们创建了一个 jqxChart 控件，并使用 hideSerie() 方法隐藏了第一个系列。我们还创建了一个按钮，用于在单击事件中隐藏第二个系列。

<div id="jqxchart"></div>
<button id="hideSerieButton">隐藏第二个系列</button>
<script>
 $(document).ready(function () {
        // 创建 jqxChart 控件
        var sampleData = [
            { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
            { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
            { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
            { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
            { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
            { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
            { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];
        var settings = {
            title: "Sales per Week",
            description: "Comparison of weekly sales.",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
            source: sampleData,
            xAxis:
            {
                dataField: 'Day',
                showGridLines: true
            },
            seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        valueAxis:
                        {
                            minValue: 0,
                            maxValue: 100,
                            unitInterval: 10,
                            description: 'Sales in %'
                        },
                        series: [
                            { dataField: 'Keith', displayText: 'Keith' },
                            { dataField: 'Erica', displayText: 'Erica' },
                            { dataField: 'George', displayText: 'George' }
                        ]
                    }
                ]
        };
        $("#jqxchart").jqxChart(settings);
        // 隐藏第一个系列
        $("#jqxchart").jqxChart('hideSerie', 0);
        // 隐藏第二个系列
        $("#hideSerieButton").click(function () {
            $("#jqxchart").jqxChart('hideSerie', 1);
        });
    });
</script>

在上述代码中，我们创建了一个 jqxChart 控件，并使用 hideSerie() 方法隐藏了第一个系列。我们还创建了一个按钮，用于在单击事件中隐藏第二个系列。

示例2

在此示例中，我们创建了一个 jqxChart 控件，并使用 hideSerie() 方法隐藏了第一个系列。我们还创建了一个按钮，用于在单击事件中显示所有系列。

<div id="jqxchart"></div>
<button id="showAllSeriesButton">显示所有系列</button>
<script>
 $(document).ready(function () {
        // 创建 jqxChart 控件
        var sampleData = [
            { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
            { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
            { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
            { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
            { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
            { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
            { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];
        var settings = {
            title: "Sales per Week",
            description: "Comparison of weekly sales.",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
            source: sampleData,
            xAxis:
            {
                dataField: 'Day',
                showGridLines: true
            },
            seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        valueAxis:
                        {
                            minValue: 0,
                            maxValue: 100,
                            unitInterval: 10,
                            description: 'Sales in %'
                        },
                        series: [
                            { dataField: 'Keith', displayText: 'Keith' },
                            { dataField: 'Erica', displayText: 'Erica' },
                            { dataField: 'George', displayText: 'George' }
                        ]
                    }
                ]
        };
        $("#jqxchart").jqxChart(settings);
        // 隐藏第一个系列
        $("#jqxchart").jqxChart('hideSerie', 0);
        // 显示所有系列
        $("#showAllSeriesButton").click(function () {
            $("#jqxchart").jqxChart('showSerie', [0, 1, 2]);
        });
    });
</script>

在上述代码中，我们创建了一个 jqxChart 控件，并使用 hideSerie() 方法隐藏了第一个系列。我们还创建了一个按钮，用于在单击事件中显示所有系列。这样，我们可以看到控件的系列在单击按钮后发生了变化。

Tags: