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

Fix data label when null included - #295

pull/310/head
Masayuki Tanaka 11 years ago
parent
c3e39aea68
commit
0230172e03
3 changed files with 171 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      c3.js
  2. 6
      c3.min.js
  3. 155
      htdocs/samples/data_label.html

34
c3.js
Unescape View File

@ -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

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

155
htdocs/samples/data_label.html
Unescape View File

@ -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>
@ -12,6 +19,123 @@
var chart1 = c3.generate({
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],
@ -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>

Write Preview
Loading…
Cancel
Save