Skip to content

C
c3-closed
Commit 9a5a6d62 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix data label on stacked line/area chart - #482

parent 53f3442f
Show whitespace changes
Inline Side-by-side
Showing with 77 additions and 30 deletions
c3.js
View file @ 9a5a6d62
...@@ -501,8 +501,8 @@ ...@@ -501,8 +501,8 @@
drawArea = $$.generateDrawArea ? $$.generateDrawArea(areaIndices, false) : undefined; drawArea = $$.generateDrawArea ? $$.generateDrawArea(areaIndices, false) : undefined;
drawBar = $$.generateDrawBar ? $$.generateDrawBar(barIndices) : undefined; drawBar = $$.generateDrawBar ? $$.generateDrawBar(barIndices) : undefined;
drawLine = $$.generateDrawLine ? $$.generateDrawLine(lineIndices, false) : undefined; drawLine = $$.generateDrawLine ? $$.generateDrawLine(lineIndices, false) : undefined;
xForText = $$.generateXYForText(barIndices, true); xForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, true);
yForText = $$.generateXYForText(barIndices, false); yForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, false);
// Update sub domain // Update sub domain
$$.subY.domain($$.y.domain()); $$.subY.domain($$.y.domain());
...@@ -2501,11 +2501,11 @@ ...@@ -2501,11 +2501,11 @@
c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) { c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
line = $$.d3.svg.line(), line = $$.d3.svg.line(),
getPoint = $$.generateGetLinePoint(lineIndices, isSub), getPoints = $$.generateGetLinePoints(lineIndices, isSub),
yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale, yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); }, xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
yValue = function (d, i) { yValue = function (d, i) {
return config.data_groups.length > 0 ? getPoint(d, i)[0][1] : yScaleGetter.call($$, d.id)(d.value); return config.data_groups.length > 0 ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)(d.value);
}; };
line = config.axis_rotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue); line = config.axis_rotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue);
...@@ -2529,7 +2529,7 @@ ...@@ -2529,7 +2529,7 @@
return path ? path : "M 0 0"; return path ? path : "M 0 0";
}; };
}; };
c3_chart_internal_fn.generateGetLinePoint = function (lineIndices, isSub) { // partial duplication of generateGetBarPoints c3_chart_internal_fn.generateGetLinePoints = function (lineIndices, isSub) { // partial duplication of generateGetBarPoints
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
lineTargetsNum = lineIndices.__max__ + 1, lineTargetsNum = lineIndices.__max__ + 1,
x = $$.getShapeX(0, lineTargetsNum, lineIndices, !!isSub), x = $$.getShapeX(0, lineTargetsNum, lineIndices, !!isSub),
...@@ -2546,7 +2546,10 @@ ...@@ -2546,7 +2546,10 @@
} }
// 1 point that marks the line position // 1 point that marks the line position
return [ return [
[posX, posY - (y0 - offset)] [posX, posY - (y0 - offset)],
[posX, posY - (y0 - offset)], // needed for compatibility
[posX, posY - (y0 - offset)], // needed for compatibility
[posX, posY - (y0 - offset)] // needed for compatibility
]; ];
}; };
}; };
...@@ -2655,14 +2658,14 @@ ...@@ -2655,14 +2658,14 @@
}; };
c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) { c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
var $$ = this, config = $$.config, area = $$.d3.svg.area(), var $$ = this, config = $$.config, area = $$.d3.svg.area(),
getPoint = $$.generateGetAreaPoint(areaIndices, isSub), getPoints = $$.generateGetAreaPoints(areaIndices, isSub),
yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale, yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); }, xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
value0 = function (d, i) { value0 = function (d, i) {
return config.data_groups.length > 0 ? getPoint(d, i)[0][1] : yScaleGetter.call($$, d.id)(0); return config.data_groups.length > 0 ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)(0);
}, },
value1 = function (d, i) { value1 = function (d, i) {
return config.data_groups.length > 0 ? getPoint(d, i)[1][1] : yScaleGetter.call($$, d.id)(d.value); return config.data_groups.length > 0 ? getPoints(d, i)[1][1] : yScaleGetter.call($$, d.id)(d.value);
}; };
area = config.axis_rotated ? area.x0(value0).x1(value1).y(xValue) : area.x(xValue).y0(value0).y1(value1); area = config.axis_rotated ? area.x0(value0).x1(value1).y(xValue) : area.x(xValue).y0(value0).y1(value1);
...@@ -2685,7 +2688,7 @@ ...@@ -2685,7 +2688,7 @@
}; };
}; };
c3_chart_internal_fn.generateGetAreaPoint = function (areaIndices, isSub) { // partial duplication of generateGetBarPoints c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { // partial duplication of generateGetBarPoints
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
areaTargetsNum = areaIndices.__max__ + 1, areaTargetsNum = areaIndices.__max__ + 1,
x = $$.getShapeX(0, areaTargetsNum, areaIndices, !!isSub), x = $$.getShapeX(0, areaTargetsNum, areaIndices, !!isSub),
...@@ -2703,7 +2706,9 @@ ...@@ -2703,7 +2706,9 @@
// 1 point that marks the area position // 1 point that marks the area position
return [ return [
[posX, offset], [posX, offset],
[posX, posY - (y0 - offset)] [posX, posY - (y0 - offset)],
[posX, posY - (y0 - offset)], // needed for compatibility
[posX, offset] // needed for compatibility
]; ];
}; };
}; };
...@@ -2737,8 +2742,8 @@ ...@@ -2737,8 +2742,8 @@
}; };
c3_chart_internal_fn.circleY = function (d, i) { c3_chart_internal_fn.circleY = function (d, i) {
var $$ = this, var $$ = this,
lineIndices = $$.getShapeIndices($$.isLineType), getPoint = $$.generateGetLinePoint(lineIndices); lineIndices = $$.getShapeIndices($$.isLineType), getPoints = $$.generateGetLinePoints(lineIndices);
return $$.config.data_groups.length > 0 ? getPoint(d, i)[0][1] : $$.getYScale(d.id)(d.value); return $$.config.data_groups.length > 0 ? getPoints(d, i)[0][1] : $$.getYScale(d.id)(d.value);
}; };
c3_chart_internal_fn.getCircles = function (i, id) { c3_chart_internal_fn.getCircles = function (i, id) {
var $$ = this; var $$ = this;
...@@ -2958,11 +2963,14 @@ ...@@ -2958,11 +2963,14 @@
.remove(); .remove();
return rect; return rect;
}; };
c3_chart_internal_fn.generateXYForText = function (barIndices, forX) { c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) {
var $$ = this, var $$ = this,
getPoints = $$.generateGetBarPoints(barIndices, false), getAreaPoints = $$.generateGetAreaPoints(barIndices, false),
getBarPoints = $$.generateGetBarPoints(barIndices, false),
getLinePoints = $$.generateGetLinePoints(lineIndices, false),
getter = forX ? $$.getXForText : $$.getYForText; getter = forX ? $$.getXForText : $$.getYForText;
return function (d, i) { return function (d, i) {
var getPoints = $$.isAreaType(d) ? getAreaPoints : $$.isBarType(d) ? getBarPoints : getLinePoints;
return getter.call($$, getPoints(d, i), d, this); return getter.call($$, getPoints(d, i), d, this);
}; };
}; };
......
c3.min.js
View file @ 9a5a6d62
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/data_label.html
View file @ 9a5a6d62
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
<div id="chart7"></div> <div id="chart7"></div>
<div id="chart8"></div> <div id="chart8"></div>
<div id="chart9" style="width:33%;"></div> <div id="chart9" style="width:33%;"></div>
<div id="chart10"></div>
<div id="chart11"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
...@@ -189,6 +191,35 @@ ...@@ -189,6 +191,35 @@
} }
}); });
var chart10 = c3.generate({
bindto: '#chart10',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 0, 140, 200, 0, 50],
['data3', 130, 0, 140, 200, 0, 50],
['data4', 130, 0, 140, 200, 0, 50],
],
type: 'area',
groups: [['data1', 'data2', 'data3', 'data4']],
labels: true
}
});
var chart11 = c3.generate({
bindto: '#chart11',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 0, 140, 200, 0, 50],
['data3', 130, 0, 140, 200, 0, 50],
['data4', 130, 0, 140, 200, 0, 50],
],
groups: [['data1', 'data2', 'data3', 'data4']],
labels: true
}
});
</script> </script>
</body> </body>
</html> </html>
src/core.js
View file @ 9a5a6d62
...@@ -496,8 +496,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) { ...@@ -496,8 +496,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
drawArea = $$.generateDrawArea ? $$.generateDrawArea(areaIndices, false) : undefined; drawArea = $$.generateDrawArea ? $$.generateDrawArea(areaIndices, false) : undefined;
drawBar = $$.generateDrawBar ? $$.generateDrawBar(barIndices) : undefined; drawBar = $$.generateDrawBar ? $$.generateDrawBar(barIndices) : undefined;
drawLine = $$.generateDrawLine ? $$.generateDrawLine(lineIndices, false) : undefined; drawLine = $$.generateDrawLine ? $$.generateDrawLine(lineIndices, false) : undefined;
xForText = $$.generateXYForText(barIndices, true); xForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, true);
yForText = $$.generateXYForText(barIndices, false); yForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, false);
// Update sub domain // Update sub domain
$$.subY.domain($$.y.domain()); $$.subY.domain($$.y.domain());
......
src/shape.line.js
View file @ 9a5a6d62
...@@ -62,11 +62,11 @@ c3_chart_internal_fn.addTransitionForLine = function (transitions, drawLine) { ...@@ -62,11 +62,11 @@ c3_chart_internal_fn.addTransitionForLine = function (transitions, drawLine) {
c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) { c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
line = $$.d3.svg.line(), line = $$.d3.svg.line(),
getPoint = $$.generateGetLinePoint(lineIndices, isSub), getPoints = $$.generateGetLinePoints(lineIndices, isSub),
yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale, yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); }, xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
yValue = function (d, i) { yValue = function (d, i) {
return config.data_groups.length > 0 ? getPoint(d, i)[0][1] : yScaleGetter.call($$, d.id)(d.value); return config.data_groups.length > 0 ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)(d.value);
}; };
line = config.axis_rotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue); line = config.axis_rotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue);
...@@ -90,7 +90,7 @@ c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) { ...@@ -90,7 +90,7 @@ c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) {
return path ? path : "M 0 0"; return path ? path : "M 0 0";
}; };
}; };
c3_chart_internal_fn.generateGetLinePoint = function (lineIndices, isSub) { // partial duplication of generateGetBarPoints c3_chart_internal_fn.generateGetLinePoints = function (lineIndices, isSub) { // partial duplication of generateGetBarPoints
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
lineTargetsNum = lineIndices.__max__ + 1, lineTargetsNum = lineIndices.__max__ + 1,
x = $$.getShapeX(0, lineTargetsNum, lineIndices, !!isSub), x = $$.getShapeX(0, lineTargetsNum, lineIndices, !!isSub),
...@@ -107,7 +107,10 @@ c3_chart_internal_fn.generateGetLinePoint = function (lineIndices, isSub) { // p ...@@ -107,7 +107,10 @@ c3_chart_internal_fn.generateGetLinePoint = function (lineIndices, isSub) { // p
} }
// 1 point that marks the line position // 1 point that marks the line position
return [ return [
[posX, posY - (y0 - offset)] [posX, posY - (y0 - offset)],
[posX, posY - (y0 - offset)], // needed for compatibility
[posX, posY - (y0 - offset)], // needed for compatibility
[posX, posY - (y0 - offset)] // needed for compatibility
]; ];
}; };
}; };
...@@ -216,14 +219,14 @@ c3_chart_internal_fn.addTransitionForArea = function (transitions, drawArea) { ...@@ -216,14 +219,14 @@ c3_chart_internal_fn.addTransitionForArea = function (transitions, drawArea) {
}; };
c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) { c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
var $$ = this, config = $$.config, area = $$.d3.svg.area(), var $$ = this, config = $$.config, area = $$.d3.svg.area(),
getPoint = $$.generateGetAreaPoint(areaIndices, isSub), getPoints = $$.generateGetAreaPoints(areaIndices, isSub),
yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale, yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); }, xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); },
value0 = function (d, i) { value0 = function (d, i) {
return config.data_groups.length > 0 ? getPoint(d, i)[0][1] : yScaleGetter.call($$, d.id)(0); return config.data_groups.length > 0 ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)(0);
}, },
value1 = function (d, i) { value1 = function (d, i) {
return config.data_groups.length > 0 ? getPoint(d, i)[1][1] : yScaleGetter.call($$, d.id)(d.value); return config.data_groups.length > 0 ? getPoints(d, i)[1][1] : yScaleGetter.call($$, d.id)(d.value);
}; };
area = config.axis_rotated ? area.x0(value0).x1(value1).y(xValue) : area.x(xValue).y0(value0).y1(value1); area = config.axis_rotated ? area.x0(value0).x1(value1).y(xValue) : area.x(xValue).y0(value0).y1(value1);
...@@ -246,7 +249,7 @@ c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) { ...@@ -246,7 +249,7 @@ c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) {
}; };
}; };
c3_chart_internal_fn.generateGetAreaPoint = function (areaIndices, isSub) { // partial duplication of generateGetBarPoints c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { // partial duplication of generateGetBarPoints
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
areaTargetsNum = areaIndices.__max__ + 1, areaTargetsNum = areaIndices.__max__ + 1,
x = $$.getShapeX(0, areaTargetsNum, areaIndices, !!isSub), x = $$.getShapeX(0, areaTargetsNum, areaIndices, !!isSub),
...@@ -264,7 +267,9 @@ c3_chart_internal_fn.generateGetAreaPoint = function (areaIndices, isSub) { // p ...@@ -264,7 +267,9 @@ c3_chart_internal_fn.generateGetAreaPoint = function (areaIndices, isSub) { // p
// 1 point that marks the area position // 1 point that marks the area position
return [ return [
[posX, offset], [posX, offset],
[posX, posY - (y0 - offset)] [posX, posY - (y0 - offset)],
[posX, posY - (y0 - offset)], // needed for compatibility
[posX, offset] // needed for compatibility
]; ];
}; };
}; };
...@@ -298,8 +303,8 @@ c3_chart_internal_fn.circleX = function (d) { ...@@ -298,8 +303,8 @@ c3_chart_internal_fn.circleX = function (d) {
}; };
c3_chart_internal_fn.circleY = function (d, i) { c3_chart_internal_fn.circleY = function (d, i) {
var $$ = this, var $$ = this,
lineIndices = $$.getShapeIndices($$.isLineType), getPoint = $$.generateGetLinePoint(lineIndices); lineIndices = $$.getShapeIndices($$.isLineType), getPoints = $$.generateGetLinePoints(lineIndices);
return $$.config.data_groups.length > 0 ? getPoint(d, i)[0][1] : $$.getYScale(d.id)(d.value); return $$.config.data_groups.length > 0 ? getPoints(d, i)[0][1] : $$.getYScale(d.id)(d.value);
}; };
c3_chart_internal_fn.getCircles = function (i, id) { c3_chart_internal_fn.getCircles = function (i, id) {
var $$ = this; var $$ = this;
......
src/text.js
View file @ 9a5a6d62
...@@ -57,11 +57,14 @@ c3_chart_internal_fn.getTextRect = function (text, cls) { ...@@ -57,11 +57,14 @@ c3_chart_internal_fn.getTextRect = function (text, cls) {
.remove(); .remove();
return rect; return rect;
}; };
c3_chart_internal_fn.generateXYForText = function (barIndices, forX) { c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) {
var $$ = this, var $$ = this,
getPoints = $$.generateGetBarPoints(barIndices, false), getAreaPoints = $$.generateGetAreaPoints(barIndices, false),
getBarPoints = $$.generateGetBarPoints(barIndices, false),
getLinePoints = $$.generateGetLinePoints(lineIndices, false),
getter = forX ? $$.getXForText : $$.getYForText; getter = forX ? $$.getXForText : $$.getYForText;
return function (d, i) { return function (d, i) {
var getPoints = $$.isAreaType(d) ? getAreaPoints : $$.isBarType(d) ? getBarPoints : getLinePoints;
return getter.call($$, getPoints(d, i), d, this); return getter.call($$, getPoints(d, i), d, this);
}; };
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment