You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2022/09/29 09:46:05 UTC
[echarts] branch fix-11042 created (now 728cf4e81)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-11042
in repository https://gitbox.apache.org/repos/asf/echarts.git
at 728cf4e81 feat(candlestick): provide borderColorDoji option for custom doji color
This branch includes the following new commits:
new 728cf4e81 feat(candlestick): provide borderColorDoji option for custom doji color
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/01: feat(candlestick): provide borderColorDoji option for custom doji color
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-11042
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 728cf4e81b16d98a89073188ca0864308854ce27
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Sep 29 17:45:28 2022 +0800
feat(candlestick): provide borderColorDoji option for custom doji color
fix and close #11042
---
src/chart/candlestick/CandlestickSeries.ts | 2 +
src/chart/candlestick/CandlestickView.ts | 13 +-
src/chart/candlestick/candlestickLayout.ts | 37 +++--
src/chart/candlestick/candlestickVisual.ts | 6 +-
test/candlestick-doji.html | 223 +++++++++++++++++++++++++----
5 files changed, 238 insertions(+), 43 deletions(-)
diff --git a/src/chart/candlestick/CandlestickSeries.ts b/src/chart/candlestick/CandlestickSeries.ts
index 6f104e5bf..019e1c55f 100644
--- a/src/chart/candlestick/CandlestickSeries.ts
+++ b/src/chart/candlestick/CandlestickSeries.ts
@@ -43,6 +43,7 @@ type CandlestickDataValue = OptionDataValue[];
interface CandlestickItemStyleOption extends ItemStyleOption {
color0?: ZRColor
borderColor0?: ColorString
+ borderColorDoji?: ZRColor
}
export interface CandlestickStateOption {
itemStyle?: CandlestickItemStyleOption
@@ -116,6 +117,7 @@ class CandlestickSeriesModel extends SeriesModel<CandlestickSeriesOption> {
color0: '#47b262', // negative
borderColor: '#eb5454',
borderColor0: '#47b262',
+ borderColorDoji: null, // when close === open
// borderColor: '#d24040',
// borderColor0: '#398f4f',
borderWidth: 1
diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts
index ed4f6660c..3d05e81c7 100644
--- a/src/chart/candlestick/CandlestickView.ts
+++ b/src/chart/candlestick/CandlestickView.ts
@@ -368,9 +368,16 @@ function createLarge(
ignoreCoarsePointer: true
});
group.add(elN);
+ const elDoji = new LargeBoxPath({
+ shape: {points: largePoints},
+ __sign: 0,
+ ignoreCoarsePointer: true
+ });
+ group.add(elDoji);
setLargeStyle(1, elP, seriesModel, data);
setLargeStyle(-1, elN, seriesModel, data);
+ setLargeStyle(0, elDoji, seriesModel, data);
if (incremental) {
elP.incremental = true;
@@ -384,8 +391,12 @@ function createLarge(
function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickSeriesModel, data: SeriesData) {
// TODO put in visual?
- const borderColor = seriesModel.get(['itemStyle', sign > 0 ? 'borderColor' : 'borderColor0'])
+ let borderColor = seriesModel.get(['itemStyle', sign > 0 ? 'borderColor' : 'borderColor0'])
+ // Use color for border color by default.
|| seriesModel.get(['itemStyle', sign > 0 ? 'color' : 'color0']);
+ if (sign === 0) {
+ borderColor = seriesModel.get(['itemStyle', 'borderColorDoji']);
+ }
// Color must be excluded.
// Because symbol provide setColor individually to set fill and stroke
diff --git a/src/chart/candlestick/candlestickLayout.ts b/src/chart/candlestick/candlestickLayout.ts
index 2a9afd997..f655b381f 100644
--- a/src/chart/candlestick/candlestickLayout.ts
+++ b/src/chart/candlestick/candlestickLayout.ts
@@ -22,7 +22,7 @@ import createRenderPlanner from '../helper/createRenderPlanner';
import {parsePercent} from '../../util/number';
import {map, retrieve2} from 'zrender/src/core/util';
import { DimensionIndex, StageHandler, StageHandlerProgressParams } from '../../util/types';
-import CandlestickSeriesModel from './CandlestickSeries';
+import CandlestickSeriesModel, { CandlestickDataItemOption } from './CandlestickSeries';
import SeriesData from '../../data/SeriesData';
import { RectLike } from 'zrender/src/core/BoundingRect';
import DataStore from '../../data/DataStore';
@@ -106,8 +106,10 @@ const candlestickLayout: StageHandler = {
subPixelOptimizePoint(ocLowPoint)
);
+ const itemModel = data.getItemModel<CandlestickDataItemOption>(dataIndex);
+ const hasDojiColor = !!itemModel.get(['itemStyle', 'borderColorDoji']);
data.setItemLayout(dataIndex, {
- sign: getSign(store, dataIndex, openVal, closeVal, closeDimI),
+ sign: getSign(store, dataIndex, openVal, closeVal, closeDimI, hasDojiColor),
initBaseline: openVal > closeVal
? ocHighPoint[vDimIdx] : ocLowPoint[vDimIdx], // open point.
ends: ends,
@@ -170,6 +172,7 @@ const candlestickLayout: StageHandler = {
const tmpOut: number[] = [];
let dataIndex;
const store = data.getStore();
+ const hasDojiColor = !!seriesModel.get(['itemStyle', 'borderColorDoji']);
while ((dataIndex = params.next()) != null) {
const axisDimVal = store.get(cDimI, dataIndex) as number;
@@ -184,7 +187,7 @@ const candlestickLayout: StageHandler = {
continue;
}
- points[offset++] = getSign(store, dataIndex, openVal, closeVal, closeDimI);
+ points[offset++] = getSign(store, dataIndex, openVal, closeVal, closeDimI, hasDojiColor);
tmpIn[cDimIdx] = axisDimVal;
@@ -202,10 +205,18 @@ const candlestickLayout: StageHandler = {
}
};
+/**
+ * Get the sign of a single data.
+ *
+ * @returns 0 for doji with hasDojiColor: true,
+ * 1 for positive,
+ * -1 for negative.
+ */
function getSign(
- store: DataStore, dataIndex: number, openVal: number, closeVal: number, closeDimI: DimensionIndex
-): -1 | 1 {
- let sign: -1 | 1;
+ store: DataStore, dataIndex: number, openVal: number, closeVal: number, closeDimI: DimensionIndex,
+ hasDojiColor: boolean
+): -1 | 1 | 0 {
+ let sign: -1 | 1 | 0;
if (openVal > closeVal) {
sign = -1;
}
@@ -213,11 +224,15 @@ function getSign(
sign = 1;
}
else {
- sign = dataIndex > 0
- // If close === open, compare with close of last record
- ? (store.get(closeDimI, dataIndex - 1) <= closeVal ? 1 : -1)
- // No record of previous, set to be positive
- : 1;
+ sign = hasDojiColor
+ // When doji color is set, use it instead of color/color0.
+ ? 0
+ : (dataIndex > 0
+ // If close === open, compare with close of last record
+ ? (store.get(closeDimI, dataIndex - 1) <= closeVal ? 1 : -1)
+ // No record of previous, set to be positive
+ : 1
+ );
}
return sign;
diff --git a/src/chart/candlestick/candlestickVisual.ts b/src/chart/candlestick/candlestickVisual.ts
index 963d3dd56..8882d6333 100644
--- a/src/chart/candlestick/candlestickVisual.ts
+++ b/src/chart/candlestick/candlestickVisual.ts
@@ -25,6 +25,7 @@ import { extend } from 'zrender/src/core/util';
const positiveBorderColorQuery = ['itemStyle', 'borderColor'] as const;
const negativeBorderColorQuery = ['itemStyle', 'borderColor0'] as const;
+const dojiBorderColorQuery = ['itemStyle', 'borderColorDoji'] as const;
const positiveColorQuery = ['itemStyle', 'color'] as const;
const negativeColorQuery = ['itemStyle', 'color0'] as const;
@@ -47,7 +48,10 @@ const candlestickVisual: StageHandler = {
function getBorderColor(sign: number, model: Model<Pick<CandlestickDataItemOption, 'itemStyle'>>) {
return model.get(
- sign > 0 ? positiveBorderColorQuery : negativeBorderColorQuery
+ sign === 0 ? dojiBorderColorQuery
+ : sign > 0
+ ? positiveBorderColorQuery
+ : negativeBorderColorQuery
);
}
diff --git a/test/candlestick-doji.html b/test/candlestick-doji.html
index d118c37a3..05b9d0c42 100644
--- a/test/candlestick-doji.html
+++ b/test/candlestick-doji.html
@@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
@@ -18,45 +18,120 @@ specific language governing permissions and limitations
under the License.
-->
+
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/simpleRequire.js"></script>
<script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
- html, body, #main {
- width: 100%;
- height: 100%;
- }
</style>
- <div id="info"></div>
- <div id="main"></div>
+
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+
+
+
+
+
+
<script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+
+ option = {
+ "xAxis": [{
+ "type": "category",
+ "data": ["2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-28", "2017-08-29", "2017-08-30", "2017-08-31"],
+ "scale": true,
+ "boundaryGap": false,
+ "axisLine": {
+ "onZero": false,
+ "lineStyle": {
+ "color": "#f1f1f1"
+ }
+ },
+ "axisTick": {
+ "show": false
+ },
+ "axisLabel": {
+ "show": false
+ },
+ "axisPointer": {
+ "z": 100
+ }
+ }],
+ "yAxis": [{
+ }],
+ "series": [{
+ "name": "stock",
+ "type": "candlestick",
+ "data": [
+ [20, 20, 17, 29],
+ [22.68, 22.68, 22.68, 22.68],
+ [24.95, 24.95, 20, 28],
+ [20, 20, 18, 24],
+ [35, 35, 35, 40],
+ [36.54, 36.54, 30, 36.54],
+ [40, 45, 38, 45],
+ [32, 28, 27, 33]
+ ],
+ "itemStyle": {
+ "color": "#fa6464",
+ "color0": "#32C896",
+ "borderColor": "#fa6464",
+ "borderColor0": "#32C896"
+ },
+ "markPoint": {
+ "label": {
+ "normal": {}
+ },
+ "data": []
+ }
+ }]
+ };
- /**
- * @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment>
- * @see <http://bl.ocks.org/mbostock/4061502>
- */
- var chart;
- var data;
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Doji test',
+ 'Expect: red, red, red, green, red, red, red, green'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
- require([
- 'echarts',
- 'data/security-sh-2013.json.js'
- ], function (echarts, rawData) {
- chart = echarts.init(document.getElementById('main'), null, {
- });
- option = {
- title: {
- text: "十字星颜色测试，期望值：红、红、红、绿、红、红、红、绿"
- },
+
+ <script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+
+ option = {
"xAxis": [{
"type": "category",
"data": ["2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-28", "2017-08-29", "2017-08-30", "2017-08-31"],
@@ -94,13 +169,89 @@ under the License.
[32, 28, 27, 33]
],
"itemStyle": {
- "normal": {
- "color": "#fa6464",
- "color0": "#32C896",
- "borderColor": "#fa6464",
- "borderColor0": "#32C896"
+ "color": "#fa6464",
+ "color0": "#32C896",
+ "borderColorDoji": "#0000ff",
+ "borderColor": "#fa6464",
+ "borderColor0": "#32C896"
+ },
+ "markPoint": {
+ "label": {
+ "normal": {}
+ },
+ "data": []
+ }
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Custom doji color',
+ 'Expect: crosses are all in blue'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+
+ <script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+
+ option = {
+ "xAxis": [{
+ "type": "category",
+ "data": ["2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-28", "2017-08-29", "2017-08-30", "2017-08-31"],
+ "scale": true,
+ "boundaryGap": false,
+ "axisLine": {
+ "onZero": false,
+ "lineStyle": {
+ "color": "#f1f1f1"
}
},
+ "axisTick": {
+ "show": false
+ },
+ "axisLabel": {
+ "show": false
+ },
+ "axisPointer": {
+ "z": 100
+ }
+ }],
+ "yAxis": [{
+ }],
+ "series": [{
+ "name": "stock",
+ "type": "candlestick",
+ "data": [
+ [20, 20, 17, 29],
+ [22.68, 22.68, 22.68, 22.68],
+ [24.95, 24.95, 20, 28],
+ [20, 20, 18, 24],
+ [35, 35, 35, 40],
+ [36.54, 36.54, 30, 36.54],
+ [40, 45, 38, 45],
+ [32, 28, 27, 33]
+ ],
+ "itemStyle": {
+ "color": "#fa6464",
+ "color0": "#32C896",
+ "borderColorDoji": "#0000ff",
+ "borderColor": "#fa6464",
+ "borderColor0": "#32C896"
+ },
+ largeThreshold: 2,
"markPoint": {
"label": {
"normal": {}
@@ -109,8 +260,20 @@ under the License.
}
}]
};
- chart.setOption(option);
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Custom doji color with large candlestick',
+ 'Expect: five blue sticks'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
});
+ });
</script>
+
+
</body>
-</html>
\ No newline at end of file
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org