🛠️ 从 V1 到 V2

本文档将帮助你从 HXKlineChart 1.x 版本升级到 HXKlineChart 2.x 版本。

两个版本的区别

• V1：基于 HXKlineChart@8 版本开发，组件名为：ths-kline-chart（停止维护）；
• V2：基于klinecharts@9.5版本开发，组件名为：HXKlineChart。

安装依赖

详见：快速开始

# V1
npm install @ths-m/ths-kline-chart

# V2
npm install @ths-m/HXKlineChart

引入调整

不再区分HXKlineChart/index.blank和HXKlineChart/index.simple，请统一使用import { ... } from 'HXKlineChart'。

设计调整

shape，annotation，tag合并成overlay，详情请查阅覆盖物。

样式配置调整

• 所有线的样式选项dash，更改为dashed，dashValue更改为dashedValue。
• candle.tooltip.labels和candle.tooltip.values，合并为candle.tooltip.custom。
• xAxis.height变更为xAxis.size，xAxis.tickText.paddingTop变更为xAxis.tickText.marginStart，xAxis.tickText.paddingBottom变更为xAxis.tickText.marginEnd。
• yAxis.height变更为yAxis.size，yAxis.tickText.paddingTop变更为yAxis.tickText.marginStart，yAxis.tickText.paddingBottom变更为yAxis.tickText.marginEnd。
• technicalIndicator.bar变更为indicator.bars，technicalIndicator.line变更为indicator.lines，technicalIndicator.circle变更为indicator.circles。
• 删除shape，annotation，tag，请用overlay代替。

API 调整

图表 API

• extension.addTechnicalIndicatorTemplate(template)变更为registerIndicator(template)。
• 删除extension.addShapeTemplate(template)，请用registerOverlay(template)代替。

实例 API

• getDom({ paneId, position })变更为getDom(paneId, position)，参数position选项变更为root，main和yAxis。
• getWidth()和getHeight()合并成一个方法getSize(paneId, position)。
• setStyleOptions(styles)变更为setStyles(styles)。
• getStyleOptions()变更为getStyles()。
• setOffsetRightSpace(space)变更为setOffsetRightDistance(distance)
• createTechnicalIndicator(value, isStack, paneOptions)变更为createIndicator(value, isStack, paneOptions)
• overrideTechnicalIndicator(override, paneId)变更为overrideIndicator(override, paneId)。
• getTechnicalIndicatorByPaneId(paneId, name)变更为getIndicatorByPaneId(paneId, name)。
• removeTechnicalIndicator(paneId, name)变更为removeIndicator(paneId, name)。
• subscribeAction(type, callback)和unsubscribeAction(type, callback)，参数type选项变更为onZoom，onScroll，onCrosshairChange，onVisibleRangeChange和onPaneDrag。
• convertToPixel(value, finder)和convertFromPixel(coordinate, finder)，参数finder.absoluteYAxis变更为finder.absolute。
• 删除createShape(value, paneId)，createAnnotation(annotation, paneId)，createTag(tag, paneId)，请用createOverlay(value, paneId)代替。
• 删除removeShape(id)，removeAnnotation(paneId, points)，removeTag(paneId, tagId)，请用removeOverlay(id)代替。
• 删除setShapeOptions(options)，请用overrideOverlay(override)代替。
• 删除createHtml(html, paneId)，removeHtml(paneId, htmlId)，请通过getDom(paneId, position)获取到对应的 dom 后操作。
• 删除getTechnicalIndicatorByPaneId(paneId, name)。

图形辅助 API

• 所有的 API 都迁移至HXKlineChart.utils。

自定义技术指标调整

• 属性plots变更为figures，子项方法color，isStroke，isDashed合并成styles。
• 方法regeneratePlots(params)变更为regeneratefigures(params)。
• 方法calcTechnicalIndicator(kLineDataList, options)变更为calc(kLineDataList, indicator)。
• 方法createTooltipDataSource({ dataSource, viewport, crosshair, technicalIndicator, xAxis,yAxis, defaultStyles })变更为createTooltipDataSource({ kLineDataList, indicator, visibleRange, bounding, crosshair, defaultStyles, xAxis, yAxis })，返回值由[{ title: 'xxx', value: 'xxx', color: 'xxx' }, ...]变更为{ name: 'xxx', calcParamsText: 'xxx', values: [{ title: 'xxx', value: 'xxx', color: 'xxx' }, ...] }。
• 方法render({ ctx, dataSource, viewport, styles,xAxis, yAxis })变更为draw({ ctx, kLineDataList, indicator, visibleRange, bounding, barSpace, defaultStyles, xAxis, yAxis })。
• 删除属性shouldCheckParamCount。

新特性

• 横轴、纵轴缩放；
• 画线功能，画线工具栏；
• 主题常量配置、调色盘。