DX图 文学: 强大的财务图绘制工具
DXcharts Lite是可视化金融数据的一种现代解决方案,其图表类型多种多样.
最初是作为数百万用户使用的大型交易应用程序的一部分开发的,
DXcharts Lite已经成熟成一个独立的产品.
它可以作为博客的简单部件或企业交易解决方案的组成部分.
概览
通过安装库并配置到您的需要中来启动 DXCharts lite .
快速启动
安装
在您的工程中安装库 :
npm install @devexperts/dxcharts-lite
package.json 安装后:
"dependencies": {
"@devexperts/dxcharts-lite": "1.0.0",
...
}
创建图表
如果您使用 Web 包或其他捆绑器,请导入 createChart 方法并传递显示图表的元素作为第一个参数.
export const createChartInstance = () => {
const container = document.getElementById('chart_container');
const chartInstance = DXChart.createChart(container);
return chartInstance;
};
这个 createChart 方法创建新图表实例 ChartBootstrap 班级和返回它.
它接受两个参数:
element: 显示图表的 HTML 元素.config(可选) : 一个实例 图表配置。 。 。 .
注:设置
width: 100%财务报告和审定财务报表height: 100%用于母容器. 默认情况下, 图表自动更改大小到父目录, 但您可以通过设置更改fixedSize在配置中.
你现在应该在屏幕上看到一张空的图表.
设定数据
要显示数据( 例如 ). Candles,可以使用捆绑的函数生成模拟数据.
导入 generateCandlesData 用它来创造蜡烛.
export const generateMockData = () => {
const candles = generateCandlesData();
chart.setData({ candles });
};
您现在应该看到一个基本图表, 如下图:
HTML 标记
以下是完整的快速启动代码示例:
<html>
<head>
<script src="https://www.unpkg.com/@devexperts/[email protected]/dist/dxchart.min.js"></script>
<script type="importmap">
{
"imports": {
"@devexperts/dxcharts-lite/": "https://www.unpkg.com/@devexperts/[email protected]/"
}
}
</script>
</head>
<body>
<div id="chart_container"></div>
</body>
<script type="module">
import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';
// create chart instance, pass parent container as 1st argument
const container = document.getElementById('chart_container');
const chart = DXChart.createChart(container);
// create and set candles data
const candles = generateCandlesData();
chart.setData({ candles });
</script>
</html>
配置
您可以使用 ChartConfig 对象(可选).
ChartConfig 设置图表实例的初始属性.
以下为现有备选方案表(详见文件).
API 密码
每个图表组件都有一个API,允许您更改苍蝇上的许多参数,在运行时修改外观,并订阅各种图表事件(比如在蜡烛上徘徊).
主要组成部分包括:
ChartComponent: 设置数据, 订阅数据变化XAxisComponent: 配置x轴标签YAxisComponent: 配置 Y 轴标签和类型CrossToolComponent: Crosshair 类型, OHLC 磁铁EventsComponent: 设置事件数据VolumesComponent: 设置音量数据WaterMarkComponent: 创建和管理水印NavigationMapComponent: 创建导航地图SnapshotComponent: 创建快照HighlightsComponent: 在标签等画布对象上绘制亮点PaneManager: 创建和管理窗体PaneComponent: 创建和管理窗格数据序列
实例
我们创造了许多不同图表配置的例子. 你可以找到他们 这里。 。 。 .
演示
为了展示它的能力,我们创造了一个 演示版本 基于 DX Charts 文学. 探索我们图书馆的全部动力!