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 2018/04/26 22:54:40 UTC
[incubator-echarts] 01/02: Fix axis interval calculation when no
label.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 8afaf84548fb7c8a29251f68aa649a022c7a7397
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Apr 27 06:38:09 2018 +0800
Fix axis interval calculation when no label.
---
src/component/axis/CartesianAxisView.js | 5 +-
src/coord/Axis.js | 5 +-
src/coord/axisTickLabelBuilder.js | 85 +++++++++++-------------
test/axis-interval2.html | 112 ++++++++++++++++++++++++++++++++
4 files changed, 156 insertions(+), 51 deletions(-)
diff --git a/src/component/axis/CartesianAxisView.js b/src/component/axis/CartesianAxisView.js
index cd4575f..542b7f3 100644
--- a/src/component/axis/CartesianAxisView.js
+++ b/src/component/axis/CartesianAxisView.js
@@ -135,8 +135,9 @@ var CartesianAxisView = AxisView.extend({
}
var colorIndex = (lineCount++) % lineColors.length;
+ var tickValue = ticksCoords[i].tickValue;
this._axisGroup.add(new graphic.Line(graphic.subPixelOptimizeLine({
- anid: 'line_' + ticksCoords[i].tickValue,
+ anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
shape: {
x1: p1[0],
y1: p1[1],
@@ -225,7 +226,7 @@ var CartesianAxisView = AxisView.extend({
tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
this._axisGroup.add(new graphic.Rect({
- anid: 'area_' + tickValue,
+ anid: tickValue != null ? 'area_' + tickValue : null,
shape: {
x: x,
y: y,
diff --git a/src/coord/Axis.js b/src/coord/Axis.js
index d63f8c1..16bdd79 100644
--- a/src/coord/Axis.js
+++ b/src/coord/Axis.js
@@ -267,11 +267,10 @@ Axis.prototype = {
/**
* Only be called in category axis.
* Can be overrided, consider other axes like in 3D.
- * @param {boolean} hideLabel
* @return {number} Auto interval for cateogry axis tick and label
*/
- calculateCategoryInterval: function (hideLabel) {
- return calculateCategoryInterval(this, hideLabel);
+ calculateCategoryInterval: function () {
+ return calculateCategoryInterval(this);
}
};
diff --git a/src/coord/axisTickLabelBuilder.js b/src/coord/axisTickLabelBuilder.js
index 4b30df2..e1a849c 100644
--- a/src/coord/axisTickLabelBuilder.js
+++ b/src/coord/axisTickLabelBuilder.js
@@ -59,7 +59,14 @@ export function createAxisTicks(axis, tickModel) {
function makeCategoryLabels(axis) {
var labelModel = axis.getLabelModel();
+ var result = makeCategoryLabelsActually(axis, labelModel);
+ return (!labelModel.get('show') || axis.scale.isBlank())
+ ? {labels: [], labelCategoryInterval: result.labelCategoryInterval}
+ : result;
+}
+
+function makeCategoryLabelsActually(axis, labelModel) {
var labelsCache = getListCache(axis, 'labels');
var optionLabelInterval = getOptionCategoryInterval(labelModel);
var result = listCacheGet(labelsCache, optionLabelInterval);
@@ -71,10 +78,7 @@ function makeCategoryLabels(axis) {
var labels;
var numericLabelInterval;
- if (!labelModel.get('show') || axis.scale.isBlank()) {
- labels = [];
- }
- else if (zrUtil.isFunction(optionLabelInterval)) {
+ if (zrUtil.isFunction(optionLabelInterval)) {
labels = makeLabelsByCustomizedCategoryInterval(axis, optionLabelInterval);
}
else {
@@ -99,7 +103,7 @@ function makeCategoryTicks(axis, tickModel) {
}
var ticks;
- var numericTickInterval = optionTickInterval;
+ var tickCategoryInterval;
// Optimize for the case that large category data and no label displayed,
// we should not return all ticks.
@@ -107,31 +111,27 @@ function makeCategoryTicks(axis, tickModel) {
ticks = [];
}
- if (zrUtil.isFunction(numericTickInterval)) {
- ticks = makeLabelsByCustomizedCategoryInterval(axis, numericTickInterval, true);
+ if (zrUtil.isFunction(optionTickInterval)) {
+ ticks = makeLabelsByCustomizedCategoryInterval(axis, optionTickInterval, true);
+ }
+ // Always use label interval by default despite label show. Consider this
+ // scenario, Use multiple grid with the xAxis sync, and only one xAxis shows
+ // labels. `splitLine` and `axisTick` should be consistent in this case.
+ else if (optionTickInterval === 'auto') {
+ var labelsResult = makeCategoryLabelsActually(axis, axis.getLabelModel());
+ tickCategoryInterval = labelsResult.labelCategoryInterval;
+ ticks = zrUtil.map(labelsResult.labels, function (labelItem) {
+ return labelItem.tickValue;
+ });
}
- // Always use label interval by default.
else {
- if (numericTickInterval === 'auto') {
- var labelsResult = makeCategoryLabels(axis);
- numericTickInterval = labelsResult.labelCategoryInterval;
- if (numericTickInterval != null) {
- ticks = zrUtil.map(labelsResult.labels, function (labelItem) {
- return labelItem.tickValue;
- });
- }
- else {
- numericTickInterval = makeAutoCategoryInterval(axis, true);
- }
- }
- if (ticks == null) {
- ticks = makeLabelsByNumericCategoryInterval(axis, numericTickInterval, true);
- }
+ tickCategoryInterval = optionTickInterval;
+ ticks = makeLabelsByNumericCategoryInterval(axis, tickCategoryInterval, true);
}
// Cache to avoid calling interval function repeatly.
return listCacheSet(ticksCache, optionTickInterval, {
- ticks: ticks, tickCategoryInterval: numericTickInterval
+ ticks: ticks, tickCategoryInterval: tickCategoryInterval
});
}
@@ -170,16 +170,11 @@ function listCacheSet(cache, key, value) {
return value;
}
-function makeAutoCategoryInterval(axis, hideLabel) {
- var cacheKey = hideLabel ? 'tickAutoInterval' : 'autoInterval';
- var result = inner(axis)[cacheKey];
- if (result != null) {
- return result;
- }
-
- return (
- inner(axis)[cacheKey] = axis.calculateCategoryInterval(hideLabel)
- );
+function makeAutoCategoryInterval(axis) {
+ var result = inner(axis).autoInterval;
+ return result != null
+ ? result
+ : (inner(axis).autoInterval = axis.calculateCategoryInterval());
}
/**
@@ -187,7 +182,7 @@ function makeAutoCategoryInterval(axis, hideLabel) {
* To get precise result, at least one of `getRotate` and `isHorizontal`
* should be implemented in axis.
*/
-export function calculateCategoryInterval(axis, hideLabel) {
+export function calculateCategoryInterval(axis) {
var params = fetchAutoCategoryIntervalCalculationParams(axis);
var labelFormatter = makeLabelFormatter(axis);
var rotation = (params.axisRotate - params.labelRotate) / 180 * Math.PI;
@@ -222,17 +217,15 @@ export function calculateCategoryInterval(axis, hideLabel) {
var width = 0;
var height = 0;
- if (!hideLabel) {
- // Polar is also calculated in assumptive linear layout here.
- // Not precise, do not consider align and vertical align
- // and each distance from axis line yet.
- var rect = textContain.getBoundingRect(
- labelFormatter(tickValue), params.font, 'center', 'top'
- );
- // Magic number
- width = rect.width * 1.3;
- height = rect.height * 1.3;
- }
+ // Polar is also calculated in assumptive linear layout here.
+ // Not precise, do not consider align and vertical align
+ // and each distance from axis line yet.
+ var rect = textContain.getBoundingRect(
+ labelFormatter(tickValue), params.font, 'center', 'top'
+ );
+ // Magic number
+ width = rect.width * 1.3;
+ height = rect.height * 1.3;
// Min size, void long loop.
maxW = Math.max(maxW, width, 7);
diff --git a/test/axis-interval2.html b/test/axis-interval2.html
index d07a963..69c762b 100644
--- a/test/axis-interval2.html
+++ b/test/axis-interval2.html
@@ -33,6 +33,7 @@
<div class="chart" id="main4"></div>
<div class="chart" id="main5"></div>
<div class="chart" id="main6"></div>
+ <div class="chart" id="main6.5"></div>
<div class="chart" id="main7"></div>
<div class="chart" id="main8"></div>
@@ -937,6 +938,117 @@
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var xAxisData = [];
+ var data1 = [];
+ var data3 = [];
+
+ for (var i = 0; i < 100; i++) {
+ xAxisData.push('c' + i);
+ data1.push((Math.random() * 5).toFixed(2));
+ data3.push((Math.random() + 0.5).toFixed(2));
+ }
+
+ var option = {
+ legend: {
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: [{
+ type: 'inside',
+ xAxisIndex: 0,
+ startValue: 17,
+ endValue: 84
+ }, {
+ type: 'inside',
+ xAxisIndex: 1,
+ startValue: 17,
+ endValue: 84
+ }, {
+ xAxisIndex: [0, 1],
+ startValue: 17,
+ endValue: 84
+ }],
+ xAxis: [{
+ data: xAxisData,
+ // axisTick: {
+ // alignWithLabel: true
+ // },
+ axisLabel: {
+ show: false
+ },
+ splitArea: {
+ show: true
+ },
+ splitLine: {
+ show: true
+ }
+ }, {
+ data: xAxisData,
+ gridIndex: 1,
+ splitArea: {
+ show: true
+ },
+ splitLine: {
+ show: true
+ }
+ }],
+ yAxis: [{
+ }, {
+ gridIndex: 1,
+ axisLabel: {
+ showMaxLabel: false
+ }
+ }],
+ grid: [{
+ bottom: '50%'
+ }, {
+ top: '50%'
+ }],
+ series: [{
+ name: 'bar',
+ type: 'line',
+ stack: 'one',
+ cursor: 'move',
+ data: data1
+ }, {
+ name: 'bar3',
+ type: 'line',
+ stack: 'two',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: data3
+ }]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main6.5', {
+ title: [
+ 'The first grid has no label, the second grid has label.',
+ 'splitLine and axisTick should be the same between the two grids.'
+ ],
+ option: option,
+ info: {xAxis: option.xAxis}
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
<script>
require([
--
To stop receiving notification emails like this one, please contact
sushuang@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org