README
lightningchart 版曲图表库
@castianta/chart-lc
图表公共 API
API
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
card | 面板 | 否 | ProCardProps | - |
- |
dataSource | 数据源 | 否 | Object[DataSourceProps] | - |
单个图形有说明 |
legend | 图例 | 否 | LegendProps | - |
见下 |
init | 初始化图表配置参数 | 否 | InitProps | - |
见下 |
chartConfig | 图表配置 | 否 | ChartConfigProps | - |
见下 |
chart3D | 2D 3D 切换 | 否 | Boolean | false |
- |
xAxis | 默认 x 轴配置 | 否 | AxisProps | - |
见下 |
yAxis | 默认 y 轴配置 | 否 | AxisProps | - |
见下 |
chartRender | 自定义渲染方式,此方法开启默认渲染方式不渲染,chart setSeries 当前图例参数配置,setAxis 轴线配置,dataSource 传入数据 | 否 | Function | (chart,{setSeries:(series,list:dataSource[index],index:index,chart3D)=>void,setAxis:(axis,AxisProps)=>void},dataSource)=>void | `` |
InitProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
width | 图表宽度 | 否 | Number 或 undefined | undefined |
- |
height | 图表高度 | 否 | Number 或 undefined | 400 |
- |
theme | 皮肤 | 否 | ThemesProps | - |
- |
LegendProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
show | 显隐 | 否 | Boolean | false |
- |
title | 标题 | 否 | String | legend |
- |
emptyFill | title 空置状态 | 否 | Boolean | false |
- |
titleColor | title 填充色 | 否 | String | #000 |
- |
position | 位置 disable 为 false 默认系统配置 true 自定义位置 | 否 | Object | #000 |
{dislabe:false,point:{x:0,y:0}} |
direction | 条目排列方向 | 否 | 'vertical' 或 'horizontal' |
vertical |
- |
entries | 使用回调函数设置 LegendBoxEntries 的样式 | 否 | (entry, component) => entry.setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) })) | () => undefined |
- |
AxisProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
title | 轴名称 | 否 | String | - |
- |
titleColor | 名称颜色 | 否 | String | - |
rgba(255,255,255,1) 或 #fff |
dragging | 拖拽 [仅 2D 生效] | 否 | Boolean | - |
true |
draggingZoom | 拖拽放大 [仅 2D 生效] | 否 | Boolean | - |
true |
WheelingZoom | 滚轮放大 [仅 2D 生效] | 否 | Boolean | - |
true |
WheelingZoom | 滚轮放大 [仅 2D 生效] | 否 | Boolean | - |
true |
strokeStyle | 样式 | 否 | Object | - |
{thickness:Number,color:String} |
fontSettings | 字体设置 | 否 | FontSettingsProps | - |
- |
scrollStrategy | 滚动策略 | 否 | fitting 或 expansion 或 progressive 或 regressive |
fitting |
- |
tickStrategy | 刻度策略 | 否 | Empty 或 Numeric 或 DateTime 或 Time |
Numeric |
- |
tickStrategyStyler | 刻度策略回调 | 否 | (TickStrategyStyler)=>tickStrategy | - |
- |
animationScroll | 动画滚动 | 否 | boolean 或 undefined |
undefined |
- |
interval | 轴刻度间隔 | 否 | Array | undefined |
[start: number, end: number, animate: number 或 boolean 或 undefined, disableScrolling: boolean 或 undefined] |
ChartConfigProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
title | 图表标题 | 否 | String | - |
- |
titleColor | title 填充色 | 否 | String | - |
- |
emptyFill | title 空置状态 | 否 | Boolean | false |
- |
boundingBox | 3D 视图盒子大小 | 否 | Object | - |
{x:Number,y:Number,z:Number} x:高 y:长 z:宽 |
boundingBoxStroke | 3D 视图盒子边框 | 否 | Object | - |
{thickness:Number,color:String} thickness:粗细 color:颜色 |
backgroundColor | 外背景色 | 否 | String | - |
rgba(255,255,255,1) 或 #fff |
border | 外边框 | 否 | Object | - |
{width:Number,color:String} width:宽度 color:颜色 |
seriesBackgroundColor | 内背景色 | 否 | String | - |
rgba(255,255,255,1) 或 #fff |
seriesBorder | 内边框 | 否 | Object | - |
{width:Number,color:String} width:宽度 color:颜色 |
mouseInteractionPan | 鼠标平移 | 否 | Boolean | true |
- |
mouseInteractionRectangleFit | 鼠标矩形适合 | 否 | Boolean | true |
- |
mouseInteractionRectangleZoom | 鼠标矩形缩放 | 否 | Boolean | true |
- |
mouseInteractionWheelZoom | 鼠标滚轮缩放 | 否 | Boolean | true |
- |
cursor | 光标 | 否 | CursorProps | - |
见下 |
CursorProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
mode | 模式 | 否 | snapToClosest 或 onHover 或 disabled |
snapToClosest |
- |
pointMarker | 点标记 | 否 | Boolean | true |
- |
resultTable | 结果表 | 否 | resultTableProps | - |
见下 |
x | x 轴刻度线 | 否 | TickProps | - |
见下 |
y | y 轴结果表 | 否 | TickProps | - |
见下 |
resultTableProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
align | 位置 | 否 | LeftTop、LeftCenter、LeftBottom、Center、RightTop、RightCenter、RightBottom |
LeftTop |
- |
backgroundColor | 背景色 | 否 | String | rgba(255,255,255,1) 或 #fff |
- |
fontColor | 字体颜色 | 否 | String | rgba(255,255,255,1) 或 #fff |
见下 |
autoText | 结果表 | 否 | Boolean | false |
- |
(...FontSettings) | 字体设置 | 否 | FontSettingsProps | - |
- |
TickProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
thickness | 粗细 | 否 | Number | 1 |
- |
color | 颜色 | 否 | snapToClosest 或 onHover 或 disabled |
snapToClosest |
- |
gridEmpty | 网格 | 否 | Boolean | false |
- |
tickMarker | 模式 | 否 | TickMarkerProps | - |
- |
TickMarkerProps
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
fontColor | 字体颜色 | 否 | String | rgba(255,255,255,1) 或 #fff |
- |
backgroundColor | 背景颜色 | 否 | String | rgba(255,255,255,1) 或 #fff |
- |
autoText | 自动填充 | 否 | Boolean | false |
- |
disabled | 启用禁用 | 否 | Boolean | true |
- |
(...FontSettings) | 字体设置 | 否 | FontSettingsProps | - |
- |