示例
参考文档
API 文档
更多
立即试用
示例
示例
图表(Chart)
特殊图表 (Special Charts)
瀑布图 (Waterfall)
基础(Basis)
全球化(Globalization)
格式(Formatting)
解析分析(Parsing)
可定制化(Customization)
字符串模板 ES6(Template Literals)
字符串模板 Wijmo(Template Strings)
多元化(Pluralization)
集合视图(CollectionView)
概览(Overview)
数据加载(Loading Data)
从客户端(from Client)
从服务端(from Server)
加载 JSON 中的日期(Loading JSON Dates)
结合进度指示(Spinners)
创建视图(Creating Views)
当前记录(Current)
排序(Sorting)
概览(Overview)
结合语言特性(International Sort)
稳定排序(Stable Sort)
筛选(Filtering)
概览(Overview)
链接(Chaining)
分组(Grouping)
概览(Overview)
自定义分组(Custom Groups)
分页(Paging)
编辑视图(Editing Views)
编辑(Editing)
添加/删除(Adding/Removing Items)
跟踪修改(Tracking Changes)
验证(Validation)
文档打印(PrintDocument)
剪贴板(Clipboard)
提示(Tooltips)
颜色(Color)
字形(Glyphs)
HTTP请求(HttpRequest)
动画(Animate)
弹出框(ShowPopup)
表格(Grid)
概览(Overview)
数据绑定(Data-binding)
基础(Basics (CollectionView))
OData API(OData API)
虚模式 OData(Virtual OData)
无限滚动(Infinite Scrolling)
非绑定表格(Unbound Grid)
列(Columns)
列宽(Column Width)
数据映射(DataMaps)
列选择器(Column Picker)
顺序重排(Reordering)
列宽调整(Resizing)
冻结(Freezing)
隐形列头(Sticky Headers)
列集合(Collections)
行(Rows)
添加/删除(Adding and Removing)
行高(Row Height)
冻结(Freezing)
行集合(Collections)
明细行(Row Detail)
自定义单元格(Custom Cells)
条件样式(Conditional Styling)
单元格备注(Cell Notes)
动态更新(Dynamic Updates)
迷你图(Sparklines)
自定义编辑器(Custom Editors)
分页/滚动(Paging / Scrolling)
浏览器端分页(Client-side Paging)
服务器端分页(Server-side Paging)
虚模式滚动(Scroll Virtualization)
隐藏滚动条(No Scrollbars)
快速滚动(Fast Scroller)
滚动和可视范围(Scrolling and ViewRange)
排序(Sorting)
概览(Overview)
按需排序(On-demand)
多列排序(Multi-column sorting)
编辑(Editing)
概览(Overview)
快速编辑(Quick Editing)
只读(Read-only)
校验(Validation)
数据集合校验(CollectionView Validation)
事件(Editing Events)
持续编辑模式(Always Editing)
行内编辑(Inline Editing)
编辑框弹出(Popup Editors)
自定义编辑器(Custom Editors)
输入法控制(IME)
选择(Selection)
概览(Overview)
多选(Multiple Selection)
复选框选择(Checkbox Selection)
查找(Searching)
选中框(Marquee)
焦点(Focus)
分组(Grouping)
基本(Groups)
分组面板(GroupPanel)
多级分组(Aggregation)
基本(Aggregate group)
数据行上方(Above the data)
数据行下方(Below the data)
自定义(Custom aggregation)
合并(Merging)
单元格合并(Cell Merging)
列头、行头合并(Header Merging)
自定义合并(Custom Merging)
限制合并(Restricted Merging)
筛选/查找(Filtering / Searching)
筛选(Filter)
类 Excel 筛选(Excel-like Filter)
概览(Overview)
自定义筛选类型(Custom Filter Type)
自定义筛选图标(Custom Filter Icons)
自定义筛选运算符(Custom Filter Operators)
优化加速(Optimizations)
服务端筛选(Server-side)
多层分级数据(Hierarchical Data)
树(TreeGrid)
子项目(Child Items)
可编辑的树(Editable TreeGrid)
非绑定模式(Unbound TreeGrid)
延迟加载(Lazy Loading)
XML 绑定(Binding to XML)
主从表(Master-Detail)
分离(Separate Grid)
内嵌表格(Nested Grid (RowDetail))
多行网络(MultiRow)
布局定义(Layout Definition)
可折叠的列头(Collapsible Column Headers)
格式化记录、分组、单元格(Styling Records, Groups, and Cells)
分组(Grouping)
筛选(Filtering)
行列冻结(Row And Column Freezing)
分页(Paging)
添加或删除记录(Adding and Deleting Records)
交易单(Transfer Slip)
订单条(Orders Slip)
订单详情(Order Detail)
购买单(Purchase Slip)
订单管理(Order Management)
销售单(Sales Slip)
电子表格(FlexSheet)
非绑定模式(Unbound)
绑定模式(Bound)
排序(Sorting)
筛选(Filtering)
格式化单元格(Formatting Cells)
多列/行头(Multiple Headers)
单元格合并(Cell Merging)
拖拽(Drag and Drop)
冻结(Frozen Cells)
公式(Formulas)
自定义函数(Custom Function)
表格(Table)
Excel 导入导出(Excel Import Export)
导入、导出、打印(Import / Export / Print)
Excel (Excel)
异步(Async)
PDF (PDF)
导出文件(Export to file)
导出 PdfDocument(Export to PdfDocument)
自定义字体(Custom fonts)
费用报告(Expense report)
费用分析报告(Expense analysis report)
自定义单元格内容(Custom cell content)
自定义单元格渲染(Customize cell rendering)
绘制单元格(Drawing cells manually)
高亮单元格(Highlight invalid cells)
Web Workers(Web Workers)
打印(Print)
事件(Events)
鼠标(Mouse)
键盘(Keyboard)
选择(Selection)
编辑(Editing)
调整(Resizing)
重排(Reordering)
拖拽(Drag and Drop)
无障碍扩展(Accessibility Extender)
剪贴板(Clipboard)
调整大小(Sizing)
概览(Overview)
通过鼠标调整(Sizing with Mouse)
自动调整行(Auto-size Rows)
自动调整行（异步）(Auto-size Rows Async)
自动调整列(Auto-size Columns)
延迟调整(Deferred Resizing)
样式(Styling)
行(Rows)
概览(Overview)
行高(Row Heights)
保留行高(Preserve Row Heights)
列(Columns)
垂直对齐(Vertical Alignment)
悬停(Hover)
响应式(Responsive)
动画(Animation)
持久化(Persisting State)
图表(Chart)
概览(Overview)
销售 Dashboard (Sales Dashboard)
柱（条）形图(Bar Charts)
基本柱形图(Basic Column Chart)
堆积条形图(Stacked Bar)
负值(Column With Negative Values)
数据标签(Column With Data Label)
范围(Range Bar)
组合(Bar With Line)
轴范围(Column With Axis Range)
误差线Column With Error Bars)
向下钻取(Column With Drill-down)
线、面积图(Line & Area Charts)
基本线图(Basic Line Chart)
基本面积图(Basic Area Chart)
带标记的堆积线(Stacked Line with LineMarker)
100% 堆积表面(Stacked 100% Area)
标记(Spline with Symbols)
带注释的区域(Area with Annotations)
差距线(Line with Gaps)
范围选择(Range Selection)
汇总日期系列(Aggregate Date Series)
动态折线图(Dynamic Line Chart)
对数轴(Logarithmic Axis)
自定义线段(Custom Line Segments)
自定义函数(Custom Function)
范围区域(Range Area)
散点、气泡图(Scatter & Bubble Charts)
XY 散点图(XY Scatter Plot)
带条件格式的散点图(Scatter with Conditional Formatting)
带有趋势线的散点图(Scatter with Trendline)
气泡图(Bubble chart)
带区域的气泡(Bubble with Zones)
散点象限(Scatter Quadrant)
选择框(Select Box)
动画(Bubble with Animation)
饼、旭日图(Pie & Sunburst Charts)
基本饼图(Basic Pie Chart)
带标签的圆环图(Donut Chart with Labels)
动画(Pie Animation)
选择切片(Selectable Slices)
渐变填充(Pie with Gradient Fill)
旭日图(Sunburst)
周期性的旭日图(PeriodicSunburst)
多饼图(Multiple Pie Charts)
树形图(Treemap)
分组树图(Grouped TreeMap)
深度(TreeMap Depth)
水平和垂直(Horizontal & Vertical Treemap)
极地、雷达图(Polar & Radar Charts)
基本雷达图(Basic Radar Chart)
填充雷达图(Radar Filled Chart)
基本极地图(BasicPolarChart)
金融图表(Financial Charts)
烛台图(Candlestick Chart)
HighLowOpenClose Chart
Heikin-Ashi Chart
Line Break Chart
Renko
Kagi
Volume Charts
Financial Indicators
Financial Overlays
Event Annotations
Fibonacci Tools
特殊图表 (Special Charts)
Box & Whisker
ErrorBars
漏斗图 (Funnel Chart)
矩形漏斗 (Funnel Rectangle)
甘特图 (Gantt)
Repeating Tasks
帕累托图 (Pareto)
瀑布图 (Waterfall)
特色功能(Chart Features)
报警区 (Alarm Zones)
动画 (Animation)
标记 (Annotations)
轴原点和位置 (Axis Origin & Position)
条件格式 (Conditional Formatting)
数据标签 (Data Labels)
可编辑的标记 (Editable Annotations)
过滤和缩放 (Filter and Wheel Zoom)
自定义轴标签 (Custom Axis Labels)
自定义系列(Custom Series)
自定义提示(Custom Tooltips)
导出 (Export)
渐变 (Gradients)
Gridlines & Tickmarks
命中测试 (Hit-Testing)
图例和标题 (Legends and Titles)
图例切换 (Legend Toggle)
线标记 (Line Markers)
对数轴 (Logarithmic Axis)
移动平均值 (Moving Averages)
多轴 (Multiple Axes)
多个区域 (Multiple Plot Areas)
调色板 (Palettes)
选择(Selection)
系列选择器 (Series Picker)
滚动和范围选择器 (Scrolling & Range Selectors)
排序(Sorting)
堆积的绘图区域(Stacked Plot Areas)
系列样式(Styling Series)
趋势线 (Trendlines)
缩放与平移 (Zooming and Panning)
仪表盘(Gauge)
概览(Overview)
基本属性(Basic Properties)
子弹仪表盘(BulletGraph)
线性仪表盘(LinearGauge)
径向仪表盘(RadialGauge)
范围(Ranges)
叠加范围(Stacked Ranges)
样式(Styling)
概览(Overview)
悬停(Hover)
焦点(Focus)
范围(Ranges)
仪表盘元素(Gauge Elements)
概览(Overview)
表盘(Face)
指针(Pointer)
径向指针(Needle Pointer)
范围(Ranges)
Thumb
刻度线(Tickmarks)
刻度线文字(Tickmark Text)
文字值(Text Value)
输入(Input)
自动完成(AutoComplete)
概览(Overview)
异步加载(Async Loading)
搜索(Searching)
概览(Overview)
搜索路径(Search Path)
搜索参数(Search Params)
自定义搜索(Custom Search)
自增项目(Auto-Add Items)
筛选(Filtering)
日历(Calendar)
概览(Overview)
范围(Ranges (min/max))
样式(Styling)
Slack Status Calendar
校验(Validation)
颜色选择器(ColorPicker)
概览(Overview)
下拉框(ComboBox)
概览(Overview)
字符串(Strings)
数字和日期(Numbers and Dates)
对象(Objects)
概览(Overview)
主从模式(Master/Detail)
排序与筛选(Sorting and Filtering)
关联(Chaining Combos)
分组(Grouping)
概览(Overview)
自定义分组(Custom Grouping)
类别分组(Category Grouping)
多列(Multi-column)
HTML 内容(HTML Content)
自增项目(Auto-Add Items)
无限滚动(Infinite Scrolling)
下拉(DropDown)
概览(Overview)
颜色输入(InputColor)
概览(Overview)
日期输入(InputDate)
概览(Overview)
格式化(Formatting)
范围(Ranges)
自定义(Customization)
校验(Validation)
日期时间输入(InputDateTime)
概览(Overview)
输入掩码(InputMask)
概览(Overview)
原始值(Raw Value)
提示字符(Prompt Character)
校验(Validation)
数字输入(InputNumber)
概览(Overview)
格式化(Formatting)
步长(Step)
范围(Ranges)
事件输入(InputTime)
概览(Overview)
下拉列表(ListBox)
概览(Overview)
自定义(Customization)
复选框(Checkboxes)
无限滚动(Infinite Scroll)
菜单(Menu)
概览(Overview)
命令(Commands)
值选择器(Value Pickers)
拆分按钮(Split Buttons)
上下文菜单(Context Menus)
分层菜单(Hierarchical Menus)
多项自动完成(MultiAutoComplete)
概览(Overview)
多选(MultiSelect)
概览(Overview)
选中项目(No Checked Item)
弹出框(Popup)
对话框(Dialogs)
警告于提醒(Alerts and Prompts)
动画(Transitions)
弹出编辑器(Popup Editors)
弹出表格(Popup with FlexGrid)
可拖拽的对话框(Draggable Dialogs)
父节点(Popups with Owner Elements)
导航(Nav)
标签面板(TabPanel)
概览(Overview)
标记语言(Markup)
作为容器(Hosting GC Controls)
通过代码添加(Tabs in Code)
Ribbon(Ribbon)
样式(Styling)
禁用和隐藏(Disabled and Invisible Tabs)
分离的内容(Detached Panels)
无障碍访问(Accessibility)
从右到左(Right to Left)
树形视图(TreeView)
性能(Performance)
行为(Behavior)
上下文菜单(Context Menus)
导航(Navigation Tree)
搜索(Searching)
样式(Styling)
概览(Overview)
节点边框(Node Borders)
Accordion Trees(Accordion Trees)
Clean Accordion(Clean Accordion)
节点(Nodes)
概览(Overview)
图像(Images)
复选框(Checkboxes)
自定义内容(Custom Content)
显示选中节点(Showing and Selecting Nodes)
编辑(Editing)
禁用(Disabling)
增加(Adding)
移除(Removing)
刷新(Refreshing)
拖拽(Drag and Drop)
在两个树之间拖拽(Drag and Drop Between Trees)
数据绑定(Data Binding)
初始化状态(Initial State)
指定绑定路径(Heterogeneous Data)
延迟加载(Lazy Loading)
延迟加载 OData(Lazy Loading OData)
延迟重新加载(Lazy Re-loading)
数据分析(OLAP)
透视引擎(PivotEngine)
概览(Overview)
性能(Performance)
定义视图(Defining Views)
服务端数据(Server Side data)
OLAP cubes (MS SSAS)
ComponentOne Data Engine
透视面板(PivotPanel)
概览(Overview)
拖拽字段(Drag & Drop fields)
字段(Fields)
类型(Types)
值字段(Value Fields)
行、列字段(Row/Column Fields)
筛选字段(Filter Fields)
自定义(Customize)
字段设置对话框(Field Settings Dialog)
筛选(Filter)
排序(Sort)
汇总(Summary functions)
别名(ShowAs functions)
格式(Formats)
计算字段(Calculated)
自定义布局(Custom layouts)
默认(Control Template)
堆叠(Stacked)
并排(Side by Side)
2列(2 columns)
仅字段(Fields only)
仅区域(Areas only)
透视表格(PivotGrid)
概览(Overview)
排序(Sort)
展开、折叠行或列(Expand/Collapse Rows and Columns)
Detail Dialog
Outline Mode
合计(Totals)
子合计(Subtotals)
自定义字段单元格(Customize Field cells)
HTML 内容n(HTML Content)
迷你图(Sparklines)
导出(Export)
Excel, PDF, CSV
透视图表(PivotChart)
概览(Overview)
图表类型(Chart Types)
标题(Title)
图例(Legend)
导出(Export)
切片器(Slicer)
PDF(PDF)
概览(Overview)
页面结构(Page structure)
绘制图像(Drawing graphics)
绘制文字(Drawing text)
字体(Fonts)
自定义字体(Custom fonts)
富文本(Rich text)
绘制图片(Drawing images)
自定义页头、页脚(Custom headers and footers)
绘制表格(Drawing tables)
费用报告(Expense report)
Drawing FlexPie (raster))
Drawing FlexPie (SVG)
查看器(Viewer)
Pdf 查看器(PdfViewer)
概览(Overview)
报表查看器(ReportViewer)
概览(Overview)
查看 FlexReport 报表(Viewing FlexReport Reports)
查看 SSRS 报表(Viewing SSRS Reports)
查看 ActiveReprots 报表(Viewing ActiveReports Reports)
Excel(Excel)
费用报告(Expense Report)
工作簿查看器(Workbook Viewer)
瀑布图
主题:
Default
Cerulean
Clean Dark
Clean Light
Cocoa
Coral
Cyborg
Dark
Flatly
Grayscale
High Contrast
Light
Material
Midnight
Minimal
Modern
Office
Organic
Paper
Simplex
Slate
Superhero
Trust
Zen
瀑布图有助于理解顺序引入的正值或负值的累积效应。 瀑布图也被称为“飞砖”图表或马里奥图表，因为空中列的明显悬浮。
import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; import * as analytics from '@grapecity/wijmo.chart.analytics'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new chart.FlexChart('#theChart', { itemsSource: getData(), bindingX: 'date' }); // // create Waterfall series for 'sales' and add it to the chart let sales = new analytics.Waterfall({ name: 'Increase,Decrease,Total', binding: 'sales', styles: { start: { fill: 'blue', stroke: 'blue' }, total: { fill: 'yellow', stroke: 'yellow' }, falling: { fill: 'red', stroke: 'red' }, rising: { fill: 'green', stroke: 'green' }, connectorLines: { stroke: 'blue', 'stroke-dasharray': '3, 1' } } }); theChart.series.push(sales); // // customize the Waterfall series document.querySelector('#connectorLines').addEventListener('click', e => { sales.connectorLines = e.target.checked; }); // document.querySelector('#showTotal').addEventListener('click', e => { sales.showTotal = e.target.checked; }); // // randomize the data document.querySelector('#btnRandomize').addEventListener('click', () => { theChart.itemsSource = getData(); }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Waterfall</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <label for="connectorLines">Show Connector Lines: </label> <input id="connectorLines" type="checkbox"> </div> <div class="form-group"> <label for="showTotal">Show Total Bar: </label> <input id="showTotal" type="checkbox"> </div> <div class="form-group"> <label for="btnRandomize">Randomize Data</label> <button id="btnRandomize" class="btn btn-default"> Go </button> </div> <div id="theChart"></div> </div> </body> </html>
import * as wijmo from '@grapecity/wijmo'; // // create some data export function getData() { let data = [], date = new Date(); // date = wijmo.DateTime.addYears(date, -1); for (let month = 0; month < 12; month++) { data.push({ date: wijmo.Globalize.format(date, 'MMM yyyy'), sales: (Math.random() - .4) * 1000 }); // date = wijmo.DateTime.addMonths(date, 1); } // return data; }
.wj-flexchart { height: 300px; } label { width: 200px; text-align: right; } body { margin-bottom: 24pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);
USA - International
Japan
South
Korea