Skip to content

Commit

Permalink
[pictorailBar] tweak repeat layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@100pah
100pah committed Jan 6, 2017
1 parent 3b2e6f8 commit 901893e
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 19 deletions.
37 changes: 21 additions & 16 deletions src/chart/bar/PictorialBarView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,14 +269,8 @@ define(function (require) {
var valueDim = opt.valueDim;
var pxSign = output.pxSign;

var symbolMargin = parsePercent(
zrUtil.retrieve(itemModel.get('symbolMargin'), symbolRepeat ? '15%' : 0),
symbolSize[valueDim.index]
);

var unitLength = symbolSize[valueDim.index] + valueLineWidth;
var uLenWithMargin = Math.max(unitLength + symbolMargin * 2, 0);
var pathLenWithMargin = uLenWithMargin;
var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
var pathLen = unitLength;

// Note: rotation will not effect the layout of symbols, because user may
// want symbols to rotate on its center, which should not be translated
Expand All @@ -285,9 +279,19 @@ define(function (require) {
if (symbolRepeat) {
var absBoundingLength = Math.abs(boundingLength);

var symbolMargin = zrUtil.retrieve(itemModel.get('symbolMargin'), '15%') + '';
var hasEndGap = false;
if (symbolMargin.lastIndexOf('!') === symbolMargin.length - 1) {
hasEndGap = true;
symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
}
symbolMargin = parsePercent(symbolMargin, symbolSize[valueDim.index]);

var uLenWithMargin = Math.max(unitLength + symbolMargin * 2, 0);

// When symbol margin is less than 0, margin at both ends will be subtracted
// to ensure that all of the symbols will not be overflow the given area.
var endFix = symbolMargin >= 0 ? 0 : symbolMargin * 2;
var endFix = hasEndGap ? 0 : symbolMargin * 2;

// Both final repeatTimes and final symbolMargin area calculated based on
// boundingLength.
Expand All @@ -299,22 +303,23 @@ define(function (require) {
// Adjust calculate margin, to ensure each symbol is displayed
// entirely in the given layout area.
var mDiff = absBoundingLength - repeatTimes * unitLength;
symbolMargin = mDiff / 2 / (mDiff >= 0 ? repeatTimes : repeatTimes - 1);
symbolMargin = mDiff / 2 / (hasEndGap ? repeatTimes : repeatTimes - 1);
uLenWithMargin = unitLength + symbolMargin * 2;
endFix = mDiff >= 0 ? 0 : symbolMargin * 2;
endFix = hasEndGap ? 0 : symbolMargin * 2;

// Update repeatTimes when not all symbol will be shown.
if (!repeatSpecified && symbolRepeat !== 'fixed') {
repeatTimes = toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin);
repeatTimes = repeatCutLength
? toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin)
: 0;
}

pathLenWithMargin = repeatTimes * uLenWithMargin - endFix;
pathLen = repeatTimes * uLenWithMargin - endFix;
output.repeatTimes = repeatTimes;
output.symbolMargin = symbolMargin;
}

output.symbolMargin = symbolMargin;

var sizeFix = pxSign * (pathLenWithMargin / 2);
var sizeFix = pxSign * (pathLen / 2);
var pathPosition = output.pathPosition = [];
pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
pathPosition[valueDim.index] = symbolPosition === 'start'
Expand Down
74 changes: 71 additions & 3 deletions test/pictorial-repeat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,10 @@
}
</style>

<h2>vertical | no clip | symbol w/h ratio and margin adjust</h2>
<h2>vertical | no clip | symbol w/h ratio and margin '40%!'</h2>
<div class="chart" id="main1"></div>
<h2>vertical | no clip | symbol w/h ratio and margin '40%' (notice 0 value)</h2>
<div class="chart" id="main1.x"></div>
<h2>vertical | clip | fixed repeatTimes</h2>
<div class="chart" id="main1.1"></div>
<h2>dataURI | symbolSize responsive (<strong>TRY RESIZE</strong>)</h2>
Expand Down Expand Up @@ -122,7 +124,7 @@ <h2>repeat strategy | dynamic data</h2>
},
symbol: pathSymbols.plane,
symbolRepeat: true,
symbolMargin: '40%',
symbolMargin: '40%!',
symbolSize: ['100%', '80%'],
z: 10,
data: [12, 60, 54, '-', 23, -16, 0, 25]
Expand All @@ -132,7 +134,7 @@ <h2>repeat strategy | dynamic data</h2>
symbol: pathSymbols.plane,
barGap: '20%',
symbolRepeat: true,
symbolMargin: '40%',
symbolMargin: '40%!',
symbolSize: ['100%', '80%'],
z: 10,
data: [33, 1, 41, -18, 23, -56, 0, 15]
Expand All @@ -158,6 +160,72 @@ <h2>repeat strategy | dynamic data</h2>



<script>
makeChart('main1.x', {
legend: {
data: ['data', 'data2', 'bg', 'original bar', 'original bg'],
selected: {
'original bar': false,
'original bg': false
}
},
tooltip: {
},
yAxis: {
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
axisTick: {show: false}
},
xAxis: {
splitLine: {show: false}
},
// animationDuration: 2000,
// animationDurationUpdate: 2000,
series: [{
name: 'data',
type: 'pictorialBar',
label: {
normal: {
show: true,
position: 'outside',
offset: [40, 0]
}
},
symbol: pathSymbols.plane,
symbolRepeat: true,
symbolMargin: '40%',
symbolSize: ['100%', '80%'],
z: 10,
data: [12, 60, 54, '-', 23, -16, 0, 25]
}, {
name: 'data2',
type: 'pictorialBar',
symbol: pathSymbols.plane,
barGap: '20%',
symbolRepeat: true,
symbolMargin: '40%',
symbolSize: ['100%', '80%'],
z: 10,
data: [33, 1, 41, -18, 23, -56, 0, 15]
}, {
name: 'original bar',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [12, 60, 54, '-', 23, -16, 0, 25]
}, {
name: 'original bg',
type: 'bar',
color: ['rgba(0,0,0,0.5)'],
data: [60, 60, 60, '-', 60, -30, 60, 60]
}]
});
</script>








<script>
makeChart('main1.1', {
Expand Down

0 comments on commit 901893e

Please sign in to comment.