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/12/04 09:37:42 UTC
(echarts) 01/01: fix(pictorial): fix zero value flipping for different axes
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-pictorial
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 08fb397c3210a115c952e0f238eb5f7ef4395737
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Dec 4 17:36:05 2024 +0800
fix(pictorial): fix zero value flipping for different axes
---
src/chart/bar/PictorialBarView.ts | 4 +-
test/pictorial-zero-value.html | 102 ++++++++++++++++++++++++++------------
2 files changed, 73 insertions(+), 33 deletions(-)
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index 0872d7b62..d834bffc0 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -341,7 +341,9 @@ function prepareBarLength(
// if 'pxSign' means sign of pixel, it can't be zero, or symbolScale will be zero
// and when borderWidth be settled, the actual linewidth will be NaN
- outputSymbolMeta.pxSign = boundingLength >= 0 ? 1 : -1;
+ outputSymbolMeta.pxSign = (valueDim.xy === 'x' !== valueAxis.inverse)
+ ? boundingLength >= 0 ? 1 : -1
+ : boundingLength > 0 ? 1 : -1;
}
function convertToCoordOnAxis(axis: Axis2D, value: number) {
diff --git a/test/pictorial-zero-value.html b/test/pictorial-zero-value.html
index 7a7b92489..aa42e541b 100644
--- a/test/pictorial-zero-value.html
+++ b/test/pictorial-zero-value.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
@@ -17,34 +18,42 @@ specific language governing permissions and limitations
under the License.
-->
+
<html>
<head>
- <meta charset="utf-8" />
+ <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="data/pie-texture.js"></script>
- <script src="lib/dat.gui.min.js"></script>
- <link rel="stylesheet" href="lib/reset.css" />
+ <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></style>
+ <style>
+ </style>
+
+
- <div id="main"></div>
+ <div id="main0"></div>
+ <div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
+ <div id="main4"></div>
- <script>
- var chart;
- require(["echarts"], function (echarts) {
- var chartDom = document.getElementById("main");
- var myChart = echarts.init(chartDom);
- var option;
- var pathSymbols = {
- reindeer:
- "path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.0 [...]
+ <script>
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var pathSymbols = {
+ reindeer:
+ "path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1 [...]
plane: "path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934 [...]
train: "path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0. [...]
ship: "path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h- [...]
@@ -165,23 +174,51 @@ under the License.
],
};
- option && myChart.setOption(option);
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Test Case Description of main0',
+ '(Muliple lines and **emphasis** are supported in description)'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
});
+ });
</script>
+
+
<script>
- require(['echarts'], function (echarts) {
+ require([
+ 'echarts',
+ // 'map/js/china',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ const valueAxis = {
+ type: 'value',
+ boundaryGap: [0, 0.01]
+ };
+ const catAxis = {
+ type: 'category',
+ data: ['Brazil', 'Indonesia']
+ };
+ for (let i = 1; i <= 4; ++i) {
+ const xAxis = (i === 1 || i === 2)
+ ? {...valueAxis}
+ : {...catAxis};
+ xAxis.inverse = i === 2;
+
+ const yAxis = (i === 1 || i === 2)
+ ? {...catAxis}
+ : {...valueAxis};
+ yAxis.inverse = i === 3;
+
option = {
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01]
- },
- yAxis: {
- type: 'category',
- data: ['Brazil', 'Indonesia']
- },
+ xAxis,
+ yAxis,
series: [
{
name: '2011',
@@ -190,9 +227,9 @@ under the License.
},
{
type: 'pictorialBar',
- symbolPosition: 'end',
+ symbolPosition: 'start',
symbolSize: 40,
- symbolOffset: [2, 0],
+ // symbolOffset: [2, 0],
zlevel: 2,
data: [
{
@@ -210,16 +247,17 @@ under the License.
]
};
-
- var chart = testHelper.create(echarts, 'main3', {
+ var chart = testHelper.create(echarts, 'main' + i, {
title: [
'Image should not be flipped when data is 0.',
+ (i < 3 ? 'horizontal' : 'vertical')
+ + ((xAxis.inverse || yAxis.inverse) ? ', inversed' : '')
],
option: option
});
-
- });
-
+ }
+ });
</script>
+
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org