playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

pull/1616/head
Masayuki Tanaka 10 years ago
parent
53f3442f73
commit
9a5a6d622e
6 changed files with 79 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      c3.js
  2. 4
      c3.min.js
  3. 31
      htdocs/samples/data_label.html
  4. 4
      src/core.js
  5. 27
      src/shape.line.js
  6. 7
      src/text.js

38
c3.js
Unescape View File

@ -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 @@
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 @@
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 @@
} }
// 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 @@
}; };
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 @@
}; };
}; };
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 @@
// 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 @@
}; };
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 @@
.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);
}; };
}; };

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
htdocs/samples/data_label.html
Unescape View File

@ -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 @@
} }
}); });
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>

4
src/core.js
Unescape View File

@ -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());

27
src/shape.line.js
Unescape View File

@ -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) {
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
} }
// 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) {
}; };
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) {
}; };
}; };
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
// 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) {
}; };
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;

7
src/text.js
Unescape View File

@ -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);
}; };
}; };

Write Preview
Loading…
Cancel
Save