# lightningchart 版曲图表库 @castianta/chart-lc 图表公共 API ## API | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ----------- | --------------------------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------- | | card | 面板 | 否 | [ProCardProps](https://procomponents.ant.design/components/list#api) | `-` | `-` | | dataSource | 数据源 | 否 | Object[DataSourceProps] | `-` | `单个图形有说明` | | legend | 图例 | 否 | LegendProps | `-` | `见下` | | init | 初始化图表配置参数 | 否 | [InitProps](###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](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/globals.html#themes) | `-` | `-` | ### 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) }))](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/interfaces/legendbox.html#setentries) | `() => 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](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/fontsettings.html) | `-` | `-` | | scrollStrategy | 滚动策略 | 否 | `fitting 或 expansion 或 progressive 或 regressive` | `fitting` | `-` | | tickStrategy | 刻度策略 | 否 | `Empty 或 Numeric 或 DateTime 或 Time` | `Numeric` | `-` | | tickStrategyStyler | 刻度策略回调 | 否 | [(TickStrategyStyler)=>tickStrategy](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/axis3d.html#settickstrategy) | `-` | `-` | | animationScroll | 动画滚动 | 否 | `boolean 或 undefined` | `undefined` | `-` | | interval | 轴刻度间隔 | 否 | [Array](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/axis3d.html#setinterval) | `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](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/fontsettings.html) | `-` | `-` | ### 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](https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/fontsettings.html) | `-` | `-` | ---