You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/10/30 18:31:48 UTC
[incubator-echarts] 01/01: fix: category axis label cache causes
that label disappear but can not show again when resize. Fixed that. Fix
#11112
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/axis-interval2
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 34ab952425d67f9d49687b039468eee3c7d9d636
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Thu Oct 31 02:26:02 2019 +0800
fix: category axis label cache causes that label disappear but can not show again when resize. Fixed that. Fix #11112
---
src/coord/axisTickLabelBuilder.js | 10 +++
test/axis-interval2.html | 140 +++++++++++++++++++++++++++++++
test/lib/testHelper.js | 7 ++
test/runTest/actions/__meta__.json | 1 +
test/runTest/actions/axis-interval2.json | 1 +
5 files changed, 159 insertions(+)
diff --git a/src/coord/axisTickLabelBuilder.js b/src/coord/axisTickLabelBuilder.js
index 41ee163..f6ca367 100644
--- a/src/coord/axisTickLabelBuilder.js
+++ b/src/coord/axisTickLabelBuilder.js
@@ -243,12 +243,16 @@ export function calculateCategoryInterval(axis) {
var interval = Math.max(0, Math.floor(Math.min(dw, dh)));
var cache = inner(axis.model);
+ var axisExtent = axis.getExtent();
var lastAutoInterval = cache.lastAutoInterval;
var lastTickCount = cache.lastTickCount;
// Use cache to keep interval stable while moving zoom window,
// otherwise the calculated interval might jitter when the zoom
// window size is close to the interval-changing size.
+ // For example, if all of the axis labels are `a, b, c, d, e, f, g`.
+ // The jitter will cause that sometimes the displayed labels are
+ // `a, d, g` (interval: 2) sometimes `a, c, e`(interval: 1).
if (lastAutoInterval != null
&& lastTickCount != null
&& Math.abs(lastAutoInterval - interval) <= 1
@@ -256,6 +260,10 @@ export function calculateCategoryInterval(axis) {
// Always choose the bigger one, otherwise the critical
// point is not the same when zooming in or zooming out.
&& lastAutoInterval > interval
+ // If the axis change is caused by chart resize, the cache should not
+ // be used. Otherwise some hiden labels might not be shown again.
+ && cache.axisExtend0 === axisExtent[0]
+ && cache.axisExtend1 === axisExtent[1]
) {
interval = lastAutoInterval;
}
@@ -264,6 +272,8 @@ export function calculateCategoryInterval(axis) {
else {
cache.lastTickCount = tickCount;
cache.lastAutoInterval = interval;
+ cache.axisExtend0 = axisExtent[0];
+ cache.axisExtend1 = axisExtent[1];
}
return interval;
diff --git a/test/axis-interval2.html b/test/axis-interval2.html
index 1ee2c58..fef05b3 100644
--- a/test/axis-interval2.html
+++ b/test/axis-interval2.html
@@ -27,6 +27,7 @@ under the License.
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
+ <script src="lib/draggable.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/reset.css">
</head>
@@ -56,6 +57,8 @@ under the License.
<div class="chart" id="main6.5"></div>
<div class="chart" id="main7"></div>
<div class="chart" id="main8"></div>
+ <div class="chart" id="main9"></div>
+ <div class="chart" id="main10"></div>
<script>
@@ -1213,5 +1216,142 @@ under the License.
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var option = {
+ legend: {
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: [{
+ type: 'inside',
+ xAxisIndex: 0
+ }, {
+ }],
+ grid: {
+ top: 10,
+ left: 100
+ },
+ xAxis: [{
+ type: 'category',
+ splitArea: {
+ show: true
+ },
+ splitLine: {
+ show: true
+ }
+ }],
+ yAxis: [{
+ type: 'category',
+ axisLabel: {
+ formatter: 'GOOD {value}',
+ fontSize: 20
+ }
+ }, {
+ axisLabel: {
+ showMaxLabel: false
+ }
+ }],
+ series: [{
+ type: 'scatter',
+ data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]
+ }]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main9', {
+ title: [
+ 'Drag to resize the yAxis util labels changes, and then drag back.',
+ 'Labels of yAxis should be able to back too the original state.'
+ ],
+ width: 300,
+ height: 300,
+ option: option,
+ draggable: true
+ });
+
+ });
+
+ </script>
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var xAxisData = [];
+ var data1 = [];
+
+ for (var i = 0; i < 100; i++) {
+ xAxisData.push('c' + i);
+ data1.push((Math.random() * 5).toFixed(2));
+ }
+
+ var option = {
+ legend: {
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: [{
+ type: 'inside',
+ xAxisIndex: 0,
+ start: 14.63022259346915,
+ end: 77.06506102371338
+ }, {
+ start: 14.63022259346915,
+ end: 77.06506102371338
+ }],
+ xAxis: [{
+ data: xAxisData,
+ splitArea: {
+ show: true
+ },
+ splitLine: {
+ show: true
+ }
+ }],
+ yAxis: [{
+ }],
+ series: [{
+ name: 'bar',
+ type: 'line',
+ stack: 'one',
+ cursor: 'move',
+ data: data1
+ }]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main10', {
+ title: [
+ 'The dataZoom window range is at the critical value of changing axis interval from 2 to 3.',
+ 'Move the dataZoom bar, the **xAxis labels should be stable**.',
+ 'That is, xAxis labels should not be sometimes [c21, c24, c27] sometimes [c20, c24, c28]'
+ ],
+ option: option,
+ // Should be fixed this width to make the dataZoom window range at the critical value.
+ width: 653,
+ height: 300,
+ autoResize: false
+ });
+
+ });
+
+ </script>
+
+
+
+
+
+
</body>
</html>
\ No newline at end of file
diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js
index 4e02abe..e0ca0d2 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -53,6 +53,7 @@
* @param {boolean} [opt.draggable]
* @param {boolean} [opt.lazyUpdate]
* @param {boolean} [opt.notMerge]
+ * @param {boolean} [opt.autoResize=true]
* @param {Array.<Object>|Object} [opt.button] {text: ..., onClick: ...}, or an array of them.
* @param {Array.<Object>|Object} [opt.buttons] {text: ..., onClick: ...}, or an array of them.
* @param {boolean} [opt.recordCanvas] 'ut/lib/canteen.js' is required.
@@ -232,6 +233,12 @@
var chart = echarts.init(dom);
if (opt.draggable) {
+ if (!window.draggable) {
+ throw new Error(
+ 'Pleasse add the script in HTML: \n'
+ + '<script src="lib/draggable.js"></script>'
+ );
+ }
window.draggable.init(dom, chart, {throttle: 70, addPlaceholder: true});
}
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 25632b4..b9a2733 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -9,6 +9,7 @@
"axes": 0,
"axis": 1,
"axis-boundaryGap": 1,
+ "axis-interval2": 3,
"axis-lastLabel": 5,
"axis-multiple": 1,
"axis-style": 2,
diff --git a/test/runTest/actions/axis-interval2.json b/test/runTest/actions/axis-interval2.json
new file mode 100644
index 0000000..ab9311d
--- /dev/null
+++ b/test/runTest/actions/axis-interval2.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":145,"x":415,"y":252},{"type":"mousemove","time":377,"x":418,"y":254},{"type":"mousemove","time":610,"x":428,"y":265},{"type":"mousemove","time":866,"x":430,"y":266},{"type":"mousemove","time":1227,"x":432,"y":266},{"type":"mousemove","time":1476,"x":434,"y":266},{"type":"mousewheel","time":1660,"x":434,"y":266,"deltaY":-1},{"type":"mousewheel","time":1747,"x":434,"y":266,"deltaY":-17},{"type":"mousewheel","time":1799,"x":434,"y":266," [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org