jQWidgets jqxChart showSerie() 方法(1)

📌 相关文章

📜 jQWidgets jqxChart showSerie() 方法(1)

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

jQWidgets jqxChart showSerie() 方法介绍

简介

jQWidgets jqxChart 是一个基于JavaScript的图表库，提供了多种类型的图表（如线性图、柱状图、饼图等）。showSerie() 方法是 jqxChart 中的一个用于控制图表系列是否可见的方法。

方法说明

showSerie() 方法用于控制 jqxChart 中指定系列是否可见。可以使用该方法控制多个系列的显隐状态。

$('#jqxChart').jqxChart('showSerie', serieIndex, enable);

该方法参数说明如下：

serieIndex: 表示操作的系列在 jqxChart 中序号。例如第一个系列为0，第二个系列为1，依此类推。
enable: 表示该系列是否可见。可选参数，类型为布尔型，默认为 true（显示该系列）。

该方法不仅可以控制系列的显隐状态，还可以根据需要进行系列的显隐切换。例如，可通过一个按钮控制系列的显隐状态，代码示例如下：

$('#showSerieBtn').click(function(){
   $('#jqxChart').jqxChart('showSerie', 1, false);
   $('#jqxChart').jqxChart('showSerie', 2, false);
});

示例

下面是一个基于 jqxChart 的图表示例，包含两个系列。点击按钮时，会切换两个系列的可见状态。

<!DOCTYPE html>
<html>
<head>
   <title>jqxChart showSerie() 方法示例</title>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets2/jqxcore.js"></script>
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets2/jqxchart.js"></script>
</head>
<body>
   <div id="jqxChart" style="width:600px; height:400px;"></div>
   <button id="showSerieBtn">切换可见状态</button>
   <script>
      $(document).ready(function () {
         //准备数据
         var sampleData = [
            { Year: '2003', Toyota: 51167, GM: 49140, Ford: 31447 },
            { Year: '2004', Toyota: 74855, GM: 46048, Ford: 32445 },
            { Year: '2005', Toyota: 79289, GM: 49259, Ford: 25545 },
            { Year: '2006', Toyota: 106970, GM: 38461, Ford: 27440 },
            { Year: '2007', Toyota: 107379, GM: 33256, Ford: 25131 },
            { Year: '2008', Toyota: 104538, GM: 25361, Ford: 21637 },
            { Year: '2009', Toyota: 77072, GM: 18970, Ford: 15912 }
         ];
         //样式定义
         var sampleTheme = {
            seriesGroups:
               [{
                  type: 'column',
                  series: [
                     { dataField: 'Toyota', displayText: 'Toyota' },
                     { dataField: 'GM', displayText: 'GM' },
                     { dataField: 'Ford', displayText: 'Ford' }
                  ]
               }]
         };
         //创建 jqxChart
         $('#jqxChart').jqxChart({
            theme: sampleTheme,
            source: sampleData,
            title: '汽车销售统计图表',
            description: '2003-2009年销售数据',
            legend: { visible: true },
            enableAnimations: true,
            padding: { left: 10, top: 5, right: 10, bottom: 5 },
            seriesGroups:
               [{
                  type: 'column',
                  columnsGapPercent: 30,
                  seriesGapPercent: 15,
                  valueAxis:
                     {
                        unitInterval: 10000,
                        maxValue: 120000,
                        displayValueAxis: true,
                        description: '销售数量（单位：辆）'
                     },
                  series: [
                     { dataField: 'Toyota', displayText: 'Toyota', showLabels: true, symbolType: 'triangle_up' },
                     { dataField: 'GM', displayText: 'GM', showLabels: true, symbolType: 'circle' },
                     { dataField: 'Ford', displayText: 'Ford', showLabels: true, symbolType: 'square' }
                  ]
               }]
         });
         //切换系列可见状态
         $('#showSerieBtn').click(function(){
            $('#jqxChart').jqxChart('showSerie', 1, false);
            $('#jqxChart').jqxChart('showSerie', 2, false);
         });
      });
   </script>
</body>
</html>

参考文献

jQWidgets官方文档：https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-api.htm