排行榜

概述

图表系统是一种用于以图形形式表示数值或类别数据的数据可视化组件。它帮助用户理解数据集中的趋势、比较、分布和关系。

图表广泛应用于：

• 仪表盘和分析工具，
• 工业监测系统，
• 财务报告平台，
• 以及实时数据应用。

主要目标是将原始数据转化为有意义的可视化洞察，从而加快决策速度。

主要特色

核心可视化功能

• 多种图表类型（条形图、线图、圆图、散布图、面积图、雷达图）
• 实时和历史数据支持
• 多系列数据可视化
• 多轴支持（尤其是Y轴扩展）
• 交互式提示和悬停详情

互动功能

• 跨数据范围的缩放和平移
• 时间范围选择（区间控制）
• 数据过滤与排序
• 系列切换（显示/隐藏数据集）
• 准星跟踪以实现精确读取

导出与报告

• 导出当前视图（图片/PDF）
• 导出完整数据集（CSV/Excel/JSON）
• 报告快照生成

UI 部分与配置

将军

工具栏选项

标题

传说

布局

Data 来源

数据来源编辑目前支持笛卡尔图、饼图和甜甜圈图、雷达图和仪表。

Advanced JSON

以下是图表设置的完整定义。用于专家模式。

 {
          "chart": {
            "layout": {
              "paddingTop": 4,
              "paddingRight": 4,
              "paddingBottom": 4,
              "paddingLeft": 4,
              "marginTop": 5,
              "marginRight": 5,
              "marginBottom": 5,
              "marginLeft": 5
            },
            "title": {
              "enabled": true,
              "text": "Pie Chart",
              "align": "center",
              "style": {
                "color": "#161616",
                "fillOpacity": 1,
                "opacity": 1,
                "fontFamily": "",
                "fontSize": 18,
                "fontWeight": "600",
                "fontStyle": "normal",
                "fontVariant": "normal",
                "textDecoration": "none",
                "maxWidth": null,
                "oversizedBehavior": "none",
                "breakWords": false
              }
            },
            "legend": {
              "enabled": true,
              "position": "bottom",
              "layout": "horizontal",
              "textStyle": {
                "color": "#525252",
                "fillOpacity": 1,
                "opacity": 1,
                "fontFamily": "",
                "fontSize": 12,
                "fontWeight": "400",
                "fontStyle": "normal",
                "fontVariant": "normal",
                "textDecoration": "none",
                "maxWidth": null,
                "oversizedBehavior": "none",
                "breakWords": false
              }
            },
            "interaction": {
              "enabled": false,
              "panX": false,
              "panY": false,
              "zoomX": false,
              "zoomY": false,
              "scrollbarX": false,
              "scrollbarY": false,
              "wheelX": "none",
              "wheelY": "none",
              "pinchZoomX": false,
              "pinchZoomY": false
            },
            "axes": {
              "x": [],
              "y": []
            },
            "series": []
          },
          "definition": {
            "kind": "placeholder",
            "title": "Simple Pie Chart",
            "message": "Add at least one row with numeric values for the pie chart."
          }
        }

结果如下所示