@castianta/chart-lc

lc版图表

Usage no npm install needed!

<script type="module">
  import castiantaChartLc from 'https://cdn.skypack.dev/@castianta/chart-lc';
</script>

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	`-`	`-`