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:47 UTC

[incubator-echarts] branch fix/axis-interval2 created (now 34ab952)

This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a change to branch fix/axis-interval2
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.


      at 34ab952  fix: category axis label cache causes that label disappear but can not show again when resize. Fixed that. Fix #11112

This branch includes the following new commits:

     new 34ab952  fix: category axis label cache causes that label disappear but can not show again when resize. Fixed that. Fix #11112

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


[incubator-echarts] 01/01: fix: category axis label cache causes that label disappear but can not show again when resize. Fixed that. Fix #11112

Posted by su...@apache.org.
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