docs: v8.2.0 docs.

Author: liihuu

docs/en/changelog.md

@@ -1,4 +1,13 @@
 # Change Log
+## 8.2.0
+`2022-01-10`
++ 🆕 Add instance methods `createHtml` and `removeHtml`.
++ 🆕 Instance methods `subscribeAction` and `unsubscribeAction` add type `tooltip`.
++ 🆕 Technical indicator template add attribute `shortName`.
++ 🆕 Technical indicator template attribute `plot.color` supports `line`.
++ 🆕 Technical indicator template attribute `styles` supports `margin`.
++ 💄 Optimize mobile scroll event response.
+
 ## 8.1.1
 `2021-12-19`
 + 🐞 Fix the problem that the style technicalIndicator.tooltip.defaultValue does not take effect.

docs/en/instance-api.md

@@ -147,6 +147,10 @@ chart.overrideTechnicalIndicator({
   shouldOhlc: true,
   shouldFormatBigNimber: false,
   styles: {
+    margin: {
+      top: 0.2,
+      bottom: 0.1
+    },
     bar: {
       upColor:'#26A69A',
       downColor:'#EF5350',
@@ -383,6 +387,36 @@ Remove tags, you can remove them in batches, just pass in the array in batches,
 - `tagId` Unique identification of the tag
 
 
+### removeTag(paneId, tagId)
+To remove tags, you can remove them in batches. You can pass in an array in batches. If the default is used, all of them will be removed.
+- `paneId` pane id, default removes all
+- `tagId` The unique identifier of the tag, by default removes all tags on the pane
+
+
+### createHtml(html, paneId)
+Create an html element that returns an id.
+- `html` element `{ id, position, content, style }`
+  - `id` id
+  - `position` position, type is `yAxis` and `content`, default is `content`
+  - `style` html element container style, inline css style
+  - `content` content, which can be a dom element or a string composed of dom elements
+- `paneId` window id, default is 'candle_pane'
+Example:
+```javascript
+chart.createHtml({
+  id: 'html_1',
+  position: 'content',
+  style: { zIndex: 12 },
+  content: '<div>8888888</div>'
+}, 'candle_pane')
+```
+
+### removeHtml(paneId, htmlId)
+Remove an html element.
+- `paneId` pane id, by default delete all
+- `htmlId` element id, which can be a single id or an array of ids. By default, all items on the corresponding pane are deleted.
+
+
 ### scrollByDistance(distance, animationDuration)
 Roll a certain distance.
 -`distance` distance
@@ -432,13 +466,13 @@ chart.setPaneOptions({
 
 ### subscribeAction(type, callback)
 Subscribe to chart actions.
-- `type` The type is 'zoom', 'scroll', 'crosshair' and 'pane_drag'
+- `type` The type is 'zoom', 'scroll', 'crosshair', 'tooltip' and 'pane_drag'
 - `callback` is a callback method
 
 
 ### unsubscribeAction(type, callback)
 Unsubscribe from chart actions.
-- `type` type is 'zoom', 'scroll', 'crosshair' and 'pane_drag'
+- `type` type is 'zoom', 'scroll', 'crosshair', 'tooltip' and 'pane_drag'
 - `callback` callback method when subscribing
 
 

docs/en/technical-indicator.md

@@ -24,6 +24,9 @@ To complete a technical indicator template, you only need to generate a technica
   // The name of the technical indicator, a necessary field, is the only identifier of the technical indicator
   name:'xxx',
 
+  // For tooltip display
+  shortName: 'xxx',
+
   // Technical indicator calculation method, necessary fields
   // This field is a callback method, the callback parameters are the source data and calculated parameters of the current chart, and an array needs to be returned
   // kLineDataList chart raw data
@@ -90,19 +93,19 @@ To complete a technical indicator template, you only need to generate a technica
 ```javascript
 {
   // Required fields, determine the return value of the method calcTechnicalIndicator
-  key:'',
-  // Can be defaulted, mainly for prompt
-  title:'',
-  // Default, drawing type, currently supports'line','circle' and'bar'
-  type:'',
-  // Basic comparison data, default
+  key: '',
+  // By default, mainly for prompt
+  title: '',
+  // By default, drawing type, currently supports'line','circle' and'bar'
+  type: '',
+  // By default, basic comparison data
   // If set, when the graph is bar, it will be drawn above and below this value, such as: the macd value of the MACD indicator
   baseValue: null,
-  // It can be defaulted. It is a callback method. The color can be set according to the callback parameters. It will only take effect when the type is'circle' and'bar'
-  // Return a string of color values
+  // By default
+  // Can be value or method, if it is a method, it needs to return a string of color values
   color: (data, options) => {},
-  // It can be defaulted, it is a callback method, you can set whether it is hollow according to the callback parameters, and it will take effect only when the type is'circle' and'bar'
-  // return a boolean value
+  // By default, it only takes effect when type is 'circle' and 'bar'
+  // Can be a fixed boolean value or a method, if it is a method, it needs to return a boolean value
   isStroke: (data, options) => {}
 }
 ```

docs/zh-CN/changelog.md

@@ -1,4 +1,13 @@
 # 更新日志
+## 8.2.0
+`2022-01-10`
++ 🆕 新增实例方法 `createHtml`和`removeHtml`。
++ 🆕 实例方法 `subscribeAction`和`unsubscribeAction`新增类型`tooltip`。
++ 🆕 技术指标模板新增属性`shortName`。
++ 🆕 技术指标模板属性`plot.color`支持`line`。
++ 🆕 技术指标模板属性`styles`支持`margin`。
++ 💄 优化移动端滚动事件响应。
+
 ## 8.1.1
 `2021-12-19`
 + 🐞 修改样式technicalIndicator.tooltip.defaultValue不生效问题。

docs/zh-CN/instance-api.md

@@ -148,6 +148,10 @@ chart.overrideTechnicalIndicator({
   shouldOhlc: true,
   shouldFormatBigNumber: false,
   styles: {
+    margin: {
+      top: 0.2,
+      bottom: 0.1
+    },
   	bar: {
       upColor: '#26A69A',
       downColor: '#EF5350',
@@ -383,6 +387,31 @@ chart.createTag({
 - `tagId` 标签的唯一标识，缺省则移除窗口上所有
 
 
+### createHtml(html, paneId)
+创建一个html元素，返回一个id。
+- `html` 元素 `{ id, position, content, style }`
+  - `id` id
+  - `position` 位置，类型为`yAxis`和`content`，默认为`content`
+  - `style` html元素容器的样式，内联css样式
+  - `content`  内容，可以是dom元素，也可以是dom元素组成的字符串
+- `paneId` 窗口id，默认为'candle_pane'
+示例:
+```javascript
+chart.createHtml({
+  id: 'html_1',
+  position: 'content',
+  style: { zIndex: 12 },
+  content: '<div>8888888</div>'
+}, 'candle_pane')
+```
+
+
+### removeHtml(paneId, htmlId)
+删除一个html元素
+- `paneId` 窗口id，缺省则删除所有
+- `htmlId` 创建时候的id，可以是单个id，也可以是id组成的数组，缺省则删除对应窗口上所有的
+
+
 ### scrollByDistance(distance, animationDuration)
 滚动一定的距离。
 - `distance` 距离
@@ -433,13 +462,13 @@ chart.setPaneOptions({
 
 ### subscribeAction(type, callback)
 订阅图表动作。
-- `type` 类型是'zoom'，'scroll'，'crosshair'和'pane_drag'
+- `type` 类型是'zoom'，'scroll'，'crosshair', 'tooltip'和'pane_drag'
 - `callback` 是一个回调方法
 
 
 ### unsubscribeAction(type, callback)
 取消订阅图表动作。
-- `type` 类型是'zoom'，'scroll'，'crosshair'和'pane_drag'
+- `type` 类型是'zoom'，'scroll'，'crosshair', 'tooltip'和'pane_drag'
 - `callback` 订阅时的回调方法，缺省则取消当前类型所有
 
 

docs/zh-CN/technical-indicator.md

@@ -24,6 +24,9 @@
   // 技术指标名字，必要字段，是技术指标的唯一标识
   name: 'xxx',
 
+  // 用于提示显示
+  shortName: 'xxx',
+
   // 技术指标计算方法，必要字段
   // 该字段是一个回调方法，回调参数是当前图表的源数据和计算的参数，需要返回一个数组
   // kLineDataList 图表的原始数据
@@ -98,11 +101,11 @@
   // 基础比对数据，可缺省
   // 如果设置，当图形是bar时，将在此值上下绘制，如：MACD指标的macd值
   baseValue: null,
-  // 可缺省，是个一个回调方法，可以根据回调参数来设置颜色，只有当type是'circle'和'bar'才会生效
-  // 返回一个颜色值的字符串
+  // 可缺省
+  // 可以是一个固定的值，也可以是一个方法，如果是方法，需要返回一个颜色值的字符串
   color: (data, options) => {},
-  // 可缺省，是个一个回调方法，可以根据回调参数来设置是否是空心，只有当type是'circle'和'bar'才会生效
-  // 返回一个boolean值
+  // 可缺省，只有当type是'circle'和'bar'才会生效
+  // 可以是一个固定的boolean值，也可以是一个方法，如果是方法，需要返回一个boolean值
   isStroke: (data, options) => {}
 }
 ```
@@ -129,6 +132,7 @@
 ```javascript
 {
   name: 'MA',
+  shortName: 'MA',
   calcParams: [5, 10],
   plots: [
     { key: 'ma1', title: 'MA5: ', type: 'line' },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "klinecharts",
-  "version": "8.1.1",
+  "version": "8.2.0",
   "description": "Lightweight k-line chart built with html5 canvas",
   "main": "index.js",
   "types": "./types/index.d.ts",