Skip to content

C
c3-closed
Commit 0230172e authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix data label when null included - #295

parent c3e39aea
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 21 deletions
c3.js
View file @ 0230172e
......@@ -1217,7 +1217,7 @@
yDomainMax = isValue(yMax) ? yMax : getYDomainMax(yTargets),
domainLength, padding, padding_top, padding_bottom,
center = axisId === 'y2' ? __axis_y2_center : __axis_y_center,
yDomainAbs, lengths, diff, ratio,
yDomainAbs, lengths, diff, ratio, isAllPositive, isAllNegative,
showHorizontalDataLabel = hasDataLabel() && __axis_rotated,
showVerticalDataLabel = hasDataLabel() && !__axis_rotated;
if (yTargets.length === 0) { // use current domain if target of axisId is none
......@@ -1226,8 +1226,15 @@
if (yDomainMin === yDomainMax) {
yDomainMin < 0 ? yDomainMax = 0 : yDomainMin = 0;
}
isAllPositive = yDomainMin > 0 && yDomainMax > 0;
isAllNegative = yDomainMin < 0 && yDomainMax < 0;
if (isAllPositive) { yDomainMin = 0; }
if (isAllNegative) { yDomainMax = 0; }
domainLength = Math.abs(yDomainMax - yDomainMin);
padding = padding_top = padding_bottom = showHorizontalDataLabel ? 0 : domainLength * 0.1;
padding = padding_top = padding_bottom = domainLength * 0.1;
if (center) {
yDomainAbs = Math.max(Math.abs(yDomainMin), Math.abs(yDomainMax));
yDomainMax = yDomainAbs - center;
......@@ -1253,9 +1260,10 @@
padding_top = getAxisPadding(__axis_y2_padding, 'top', padding, domainLength);
padding_bottom = getAxisPadding(__axis_y2_padding, 'bottom', padding, domainLength);
}
// Bar/Area chart with only positive values should be 0-based
if ((hasBarType(yTargets) || hasAreaType(yTargets)) && !hasNegativeValueInTargets(yTargets)) {
padding_bottom = yDomainMin;
// Bar/Area chart should be 0-based if all positive|negative
if (hasBarType(yTargets) || hasAreaType(yTargets)) {
if (isAllPositive) { padding_bottom = yDomainMin; }
if (isAllNegative) { padding_top = -yDomainMax; }
}
return [yDomainMin - padding_bottom, yDomainMax + padding_top];
}
......@@ -2563,22 +2571,24 @@
return getter(getPoints(d, i), d, this);
};
}
function getXForText(points, d) {
var padding;
function getXForText(points, d, textElement) {
var box = textElement.getBoundingClientRect(), xPos, padding;
if (__axis_rotated) {
padding = isBarType(d) ? 4 : 6;
return points[2][1] + padding * (d.value < 0 ? -1 : 1);
xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1);
} else {
return points[0][0] + (points[2][0] - points[0][0]) / 2;
xPos = points[0][0] + (points[2][0] - points[0][0]) / 2;
}
return xPos > width ? width - box.width : xPos;
}
function getYForText(points, d, textElement) {
var box = textElement.getBoundingClientRect();
var box = textElement.getBoundingClientRect(), yPos;
if (__axis_rotated) {
return (points[0][0] + points[2][0] + box.height * 0.6) / 2;
yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2;
} else {
return points[2][1] + (d.value < 0 ? box.height : isBarType(d) ? -3 : -6);
yPos = points[2][1] + (d.value < 0 ? box.height : isBarType(d) ? -3 : -6);
}
return yPos < box.height ? box.height : yPos;
}
function generateGetAreaPoint(areaIndices, isSub) { // partial duplication of generateGetBarPoints
......
c3.min.js
View file @ 0230172e
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 @ 0230172e
......@@ -5,6 +5,13 @@
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<div id="chart7"></div>
<div id="chart8"></div>
<div id="chart9" style="width:33%;"></div>
<script src="/js/d3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
......@@ -14,6 +21,123 @@
bindto: '#chart1',
data: {
columns: [
['data1', 190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -190, -200, -190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
}
});
var chart4 = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', 190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart5 = c3.generate({
bindto: '#chart5',
data: {
columns: [
['data1', -190, -200, -190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart6 = c3.generate({
bindto: '#chart6',
data: {
columns: [
['data1', -190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart7 = c3.generate({
bindto: '#chart7',
data: {
columns: [
['data1', 30, 200, 100, 500, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 250, 220, 210, 240, 215, 225]
......@@ -27,13 +151,28 @@
}
});
var chart2 = c3.generate({
bindto: '#chart2',
var chart8 = c3.generate({
bindto: '#chart8',
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
['data1', -190, 200, 190, null],
['data1', -30, -200, -100, -500, -150, -250],
['data2', -50, -20, -10, -40, -15, -25],
['data3', -250, -220, -210, -240, -215, -225]
],
groups: [['data1', 'data2', 'data3']],
labels: true,
type: 'bar',
},
axis: {
rotated: true
}
});
var chart9 = c3.generate({
bindto: '#chart9',
data: {
columns: [
['data1', -19000000000000, 200, 19000000000000, null],
],
type: 'bar',
labels: {
......@@ -46,10 +185,8 @@
}
},
axis: {
x: {
type: 'categorized'
}
},
rotated: true
}
});
</script>
......
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