This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix/customValues in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 5fb9e9d5ec4785a8da196b4e5208a7161251aa17 Author: Ovilia <[email protected]> AuthorDate: Wed Jul 24 14:50:46 2024 +0800 fix(axis): ticks overflowing grid area with dataZoom #20185 --- src/coord/axisTickLabelBuilder.ts | 9 +- test/axis-customTicks.html | 186 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 193 insertions(+), 2 deletions(-) diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts index e7f7bbb08..329ad6447 100644 --- a/src/coord/axisTickLabelBuilder.ts +++ b/src/coord/axisTickLabelBuilder.ts @@ -84,8 +84,11 @@ export function createAxisLabels(axis: Axis): { const custom = axis.getLabelModel().get('customValues'); if (custom) { const labelFormatter = makeLabelFormatter(axis); + const extent = axis.scale.getExtent(); + const tickNumbers = tickValuesToNumbers(axis, custom); + const ticks = zrUtil.filter(tickNumbers, val => val >= extent[0] && val <= extent[1]); return { - labels: tickValuesToNumbers(axis, custom).map(numval => { + labels: zrUtil.map(ticks, numval => { const tick = {value: numval}; return { formattedLabel: labelFormatter(tick), @@ -115,8 +118,10 @@ export function createAxisTicks(axis: Axis, tickModel: AxisBaseModel): { } { const custom = axis.getTickModel().get('customValues'); if (custom) { + const extent = axis.scale.getExtent(); + const tickNumbers = tickValuesToNumbers(axis, custom); return { - ticks: tickValuesToNumbers(axis, custom) + ticks: zrUtil.filter(tickNumbers, val => val >= extent[0] && val <= extent[1]) }; } // Only ordinal scale support tick interval diff --git a/test/axis-customTicks.html b/test/axis-customTicks.html index 24f9c7dc9..7f79f099d 100644 --- a/test/axis-customTicks.html +++ b/test/axis-customTicks.html @@ -38,6 +38,8 @@ under the License. <div id="main1"></div> <div id="main2"></div> <div id="main3"></div> + <div id="main4"></div> + <div id="main5"></div> <script> require(['echarts'], function (echarts) { @@ -198,5 +200,189 @@ under the License. </script> + <script> + require(['echarts'], function (echarts) { + var option = { + grid: { + left: 300 + }, + dataZoom: [ + { + show: true, + realtime: true, + start: 20, + end: 100 + }, + { + type: 'inside', + realtime: true, + start: 20, + end: 100 + } + ], + xAxis: { + axisTick: { + alignWithLabel: false, + customValues: ['a', 'c', 'd'] + }, + axisLabel: { + customValues: ['a', 'c', 'd'] + }, + type: 'category', + data: ['a', 'b', 'c', 'd'] + }, + yAxis: {}, + series: [ + { + symbolSize: 8, + data: [ + ['a', 34], + ['b', 20], + ['c', 23] + ], + type: 'scatter' + } + ] + }; + + + var chart = testHelper.create(echarts, 'main4', { + title: [ + 'customValues should not overflow the grid (category axis)', + '`a` in the axis label should not be displayed' + ], + option: option + }); + }); + </script> + + <script> + require(['echarts'], function (echarts) { + var laData = [[1, 3.47], [2, 7.84], [3, 2.01], [4, 4.20], [5, 3.87], [6, 1.50], [7, 2.56], [8, 6.40], [9, 1.74], [10, 2.96]]; + + var option = { + grid: {}, + dataZoom: [ + { + show: true, + realtime: true, + start: 10, + end: 100 + }, + { + type: 'inside', + realtime: true, + start: 10, + end: 100 + } + ], + xAxis: { + // inverse: true, + min: 0.8232487, + max: 15.913814, + axisTick: { + alignWithLabel: false, + customValues: [ + 0.8232487, 1.0162385, 1.1550374, 1.2683247, 1.3663184, 1.4539799, + 1.5341381, 1.6085765, 1.678501, 1.7447696, 2.0390995, 2.2967868, + 2.5353202, 2.763711, 2.9876446, 3.2113228, 3.4383155, 3.6720607, + 3.9162545, 4.1752627, 4.4546794, 4.7622291, 5.1094275, 5.5150457, + 6.0135369, 6.6807831, 6.8487278, 7.0341985, 7.2417842, 7.4781695, + 7.7536565, 8.0853878, 8.5052466, 8.7672731, 9.0841154, 9.4869366, + 10.0451175, 10.1885089, 10.3480597, 10.5280286, 10.7346329, 10.9774775, + 11.2725888, 11.6498673, 11.8872372, 12.1760407, 12.5457607, 13.0622408, + 13.1956236, 13.3443503, 13.5124879, 13.7059808, 13.9340232, 14.2119776, + 14.5685523, 14.7935524, 15.0679412, 15.4201567, 15.913814 + ] + }, + axisLabel: { + customValues: [ + 0.8232487, 1.7447696, 2.5353202, 3.6720607, 5.1094275, 6.6807831, + 7.7536565, 10.0451175, 10.9774775, 13.0622408, 13.9340232, 15.913814 + ], + formatter: function (value, index, revers = true) { + switch (value) { + case 0.8232487: + return revers ? '1 %' : '99%'; + case 1.7447696: + return revers ? '10 %' : '90%'; + case 2.5353202: + return revers ? '25 %' : '75%'; + case 3.6720607: + return revers ? '50 %' : '50%'; + case 5.1094275: + return revers ? '75 %' : '25%'; + case 6.6807831: + return revers ? '90 %' : '10%'; + case 7.7536565: + return revers ? '95 %' : '5%'; + case 10.0451175: + return revers ? '99 %' : '1%'; + case 10.9774775: + return revers ? '99,5 %' : '0,5%'; + case 13.0622408: + return revers ? '99,9 %' : '0,1%'; + case 13.9340232: + return revers ? '99,9 %' : '0,05%'; + case 15.913814: + return revers ? '99,9 %' : '0,01%'; + default: + return '- %'; + } + } + } + }, + yAxis: {}, + series: [ + { + symbolSize: 8, + data: [ + [5.890028, 627], + [2.264864, 191], + [3.908172, 364], + [8.400104, 1040], + [3.298611, 301], + [1.921706, 164], + [3.445732, 318], + [4.426555, 440], + [1.490985, 145], + [1.72375, 160], + [5.050093, 498], + [2.099646, 176], + [4.245153, 422], + [7.3673, 686], + [3.15342, 254], + [1.182348, 118], + [2.720003, 244], + [3.595705, 320], + [2.421612, 199], + [3.009242, 251], + [3.749499, 325], + [4.072923, 393], + [4.619232, 484], + [5.573134, 573], + [4.825884, 494], + [2.86512, 246], + [6.26557, 652], + [5.296798, 530], + [2.572668, 241], + [6.733265, 659] + ], + type: 'scatter' + } + ] + }; + + + var chart = testHelper.create(echarts, 'main5', { + title: [ + 'customValues should not overflow the grid (time axis)' + ], + option: option + }); + }); + </script> + + </body> </html> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
