@abdullahsaleem93/ngx-charts 中文文档教程
ngx-charts
Angular2 及更高版本的声明性图表框架！
ngx-charts 是独一无二的，因为我们不仅包装 d3，也不包装任何其他图表引擎。 它使用 Angular 来渲染和动画 SVG 元素及其所有绑定和速度优势，并使用 d3 来实现出色的数学函数、比例、轴和形状生成器等。通过让 Angular 完成所有渲染，它让我们打开了大门到 Angular 平台提供的无限可能性，例如 AoT、Universal 等。
数据可视化是一门科学，但这并不意味着它必须是丑陋的。 我们在创建这个项目时所做的一项重大努力是使图表美观。 这些样式也可以通过 CSS 完全自定义，因此您可以随意覆盖它们。
此外，通过利用通过 ngx-charts 模块公开的各种 ngx-charts 组件，可以构建自定义图表。
Features
Chart Types
- Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
- Line
- Area (Standard, Stacked, Normalized)
- Pie (Explodable, Grid, Custom legends)
- Bubble
- Donut
- Gauge (Linear & Radial)
- Force Directed Graph
- Heatmap
- Treemap
- Number Cards
Customization
- Autoscaling
- Timeline Filtering
- Line Interpolation
- Configurable Axis Labels
- Legends (Labels & Gradient)
- Advanced Label Positioning
- Real-time data support
- Advanced Tooltips
- Data point Event Handlers
- Works with ngUpgrade
Install
要在您的项目中使用 ngx-charts，请通过 npm 安装它：
npm i @swimlane/ngx-charts --save
Custom Charts
学习如何使用 ngx-图表组件构建自定义图表和查找示例，请参考我们的自定义图表页面< /a>。
Credits
ngx-charts 是一个Swimlane 开源项目； 我们相信通过分享我们为我们的应用程序构建的一些项目来回馈开源社区。 Swimlane 是一个自动化的网络安全操作和事件响应平台，使网络安全团队能够利用威胁情报、加快事件响应和自动化安全操作。
SecOps Hub 是一个开放的、与产品无关的在线社区，供安全专业人员分享想法、用例、最佳实践和事件响应策略。
ngx-charts
Declarative Charting Framework for Angular2 and beyond!
ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators, etc. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc.
Data visualization is a science but that doesn't mean it has to be ugly. One of the big efforts we've made while creating this project is to make the charts aesthetically pleasing. The styles are also completely customizable through CSS, so you can override them as you please.
Also, constructing custom charts is possible by leveraging the various ngx-charts components that are exposed through the ngx-charts module.
For more info, check out the documentation and the demos.
Features
Chart Types
- Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
- Line
- Area (Standard, Stacked, Normalized)
- Pie (Explodable, Grid, Custom legends)
- Bubble
- Donut
- Gauge (Linear & Radial)
- Force Directed Graph
- Heatmap
- Treemap
- Number Cards
Customization
- Autoscaling
- Timeline Filtering
- Line Interpolation
- Configurable Axis Labels
- Legends (Labels & Gradient)
- Advanced Label Positioning
- Real-time data support
- Advanced Tooltips
- Data point Event Handlers
- Works with ngUpgrade
Install
To use ngx-charts in your project install it via npm:
npm i @swimlane/ngx-charts --save
Custom Charts
To learn how to use the ngx-charts components to build custom charts and find examples, please refer to our Custom Charts Page.
Credits
ngx-charts is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.
SecOps Hub is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.
