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 2024/06/28 02:44:07 UTC
(echarts) branch feat-step created (now 05ac7dd6e)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch feat-step
in repository https://gitbox.apache.org/repos/asf/echarts.git
at 05ac7dd6e fix(line): step areaStyle bug #20021
This branch includes the following new commits:
new 05ac7dd6e fix(line): step areaStyle bug #20021
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: fix(line): step areaStyle bug #20021
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch feat-step
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 05ac7dd6efb7b7a512735552a90ba76fe9513508
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Jun 28 10:43:15 2024 +0800
fix(line): step areaStyle bug #20021
---
src/chart/line/LineView.ts | 50 +++++++++++++--------
test/line-step.html | 105 +++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 138 insertions(+), 17 deletions(-)
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 9672eb720..21f8e4367 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -147,8 +147,19 @@ function getStackedOnPoints(
return points;
}
+/**
+ * Filter the null data and extend data for step considering `stepTurnAt`
+ *
+ * @param points data to convert, that may containing null
+ * @param basePoints base data to reference, used only for areaStyle points
+ * @param coordSys coordinate system
+ * @param stepTurnAt 'start' | 'end' | 'middle' | true
+ * @param connectNulls whether to connect nulls
+ * @returns converted point positions
+ */
function turnPointsIntoStep(
points: ArrayLike<number>,
+ basePoints: ArrayLike<number> | null,
coordSys: Cartesian2D | Polar,
stepTurnAt: 'start' | 'end' | 'middle',
connectNulls: boolean
@@ -163,12 +174,18 @@ function turnPointsIntoStep(
const nextPt: number[] = [];
const filteredPoints = [];
if (connectNulls) {
- for (i = 0; i < points.length; i += 2) {
- if (!isNaN(points[i]) && !isNaN(points[i + 1])) {
- filteredPoints.push(points[i], points[i + 1]);
- }
- }
- points = filteredPoints;
+ for (i = 0; i < points.length; i += 2) {
+ /**
+ * For areaStyle of stepped lines, `stackedOnPoints` should be
+ * filtered the same as `points` so that the base axis values
+ * should stay the same as the lines above. See #20021
+ */
+ const reference = basePoints || points;
+ if (!isNaN(reference[i]) && !isNaN(reference[i + 1])) {
+ filteredPoints.push(points[i], points[i + 1]);
+ }
+ }
+ points = filteredPoints;
}
for (i = 0; i < points.length - 2; i += 2) {
nextPt[0] = points[i + 2];
@@ -717,12 +734,11 @@ class LineView extends ChartView {
);
if (step) {
- // TODO If stacked series is not step
- points = turnPointsIntoStep(points, coordSys, step, connectNulls);
-
if (stackedOnPoints) {
- stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step, connectNulls);
+ stackedOnPoints = turnPointsIntoStep(stackedOnPoints, points, coordSys, step, connectNulls);
}
+ // TODO If stacked series is not step
+ points = turnPointsIntoStep(points, null, coordSys, step, connectNulls);
}
polyline = this._newPolyline(points);
@@ -801,11 +817,11 @@ class LineView extends ChartView {
else {
// Not do it in update with animation
if (step) {
- // TODO If stacked series is not step
- points = turnPointsIntoStep(points, coordSys, step, connectNulls);
if (stackedOnPoints) {
- stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step, connectNulls);
+ stackedOnPoints = turnPointsIntoStep(stackedOnPoints, points, coordSys, step, connectNulls);
}
+ // TODO If stacked series is not step
+ points = turnPointsIntoStep(points, null, coordSys, step, connectNulls);
}
polyline.setShape({
@@ -1337,10 +1353,10 @@ class LineView extends ChartView {
let stackedOnNext = diff.stackedOnNext;
if (step) {
// TODO If stacked series is not step
- current = turnPointsIntoStep(diff.current, coordSys, step, connectNulls);
- stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, coordSys, step, connectNulls);
- next = turnPointsIntoStep(diff.next, coordSys, step, connectNulls);
- stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step, connectNulls);
+ stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, diff.current, coordSys, step, connectNulls);
+ current = turnPointsIntoStep(diff.current, null, coordSys, step, connectNulls);
+ stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, diff.next, coordSys, step, connectNulls);
+ next = turnPointsIntoStep(diff.next, null, coordSys, step, connectNulls);
}
// Don't apply animation if diff is large.
// For better result and avoid memory explosion problems like
diff --git a/test/line-step.html b/test/line-step.html
index 7e07d0dec..b4bac8cb3 100644
--- a/test/line-step.html
+++ b/test/line-step.html
@@ -38,6 +38,8 @@ under the License.
<div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
@@ -105,6 +107,109 @@ under the License.
</script>
+ <script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [null, 250, null, 260, 270, 280, null],
+ type: 'line',
+ areaStyle: { opacity: 0.2 },
+ step: 'end',
+ connectNulls: true
+ },
+ {
+ data: [null, 150, 160, null, 170, 180, 190],
+ type: 'line',
+ areaStyle: { opacity: 0.2 },
+ step: 'end',
+ connectNulls: true
+ },
+ {
+ data: [40, 50, 60, null, 70, null, null],
+ type: 'line',
+ areaStyle: { opacity: 0.2 },
+ step: 'end',
+ connectNulls: true
+ },
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'null points in step line with connectNull: true',
+ 'AreaStyle should be correct.'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+
+ <script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [null, 250, null, 260, 270, 280, null],
+ type: 'line',
+ areaStyle: { opacity: 0.2 },
+ step: 'end',
+ connectNulls: false
+ },
+ {
+ data: [null, 150, 160, null, 170, 180, 190],
+ type: 'line',
+ areaStyle: { opacity: 0.2 },
+ step: 'end',
+ connectNulls: false
+ },
+ {
+ data: [40, 50, 60, null, 70, null, null],
+ type: 'line',
+ areaStyle: { opacity: 0.2 },
+ step: 'end',
+ connectNulls: false
+ },
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'null points in step line with connectNull: false',
+ 'AreaStyle should be correct.'
+ ],
+ option: option
+ });
+ });
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org