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

Fix y padding for data label - #295

pull/300/head
Masayuki Tanaka 11 years ago
parent
ed534fc53a
commit
9a67dce279
3 changed files with 69 additions and 8 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. 18
      c3.js
  2. 2
      c3.min.js
  3. 57
      htdocs/samples/data_label.html

18
c3.js
Unescape View File

@ -1217,7 +1217,7 @@
yDomainMax = isValue(yMax) ? yMax : getYDomainMax(yTargets), yDomainMax = isValue(yMax) ? yMax : getYDomainMax(yTargets),
domainLength, padding, padding_top, padding_bottom, domainLength, padding, padding_top, padding_bottom,
center = axisId === 'y2' ? __axis_y2_center : __axis_y_center, center = axisId === 'y2' ? __axis_y2_center : __axis_y_center,
yDomainAbs, widths, diff, ratio, yDomainAbs, lengths, diff, ratio,
showHorizontalDataLabel = hasDataLabel() && __axis_rotated; showHorizontalDataLabel = hasDataLabel() && __axis_rotated;
if (yTargets.length === 0) { // use current domain if target of axisId is none if (yTargets.length === 0) { // use current domain if target of axisId is none
return axisId === 'y2' ? y2.domain() : y.domain(); return axisId === 'y2' ? y2.domain() : y.domain();
@ -1234,11 +1234,15 @@
} }
// add padding for data label // add padding for data label
if (showHorizontalDataLabel) { if (showHorizontalDataLabel) {
widths = getDataLabelWidth(yDomainMin, yDomainMax, axisId); lengths = getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width');
diff = diffDomain(y.range()); diff = diffDomain(y.range());
ratio = [widths[0] / diff, widths[1] / diff]; ratio = [lengths[0] / diff, lengths[1] / diff];
padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1])); padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1]));
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1])); padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else {
lengths = getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height');
padding_top += lengths[1];
padding_bottom += lengths[0];
} }
if (axisId === 'y' && __axis_y_padding) { if (axisId === 'y' && __axis_y_padding) {
padding_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength); padding_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength);
@ -1806,17 +1810,17 @@
} }
return false; return false;
} }
function getDataLabelWidth(min, max, axisId) { function getDataLabelLength(min, max, axisId, key) {
var widths = [], paddingCoef = 1.3; var lengths = [0, 0], paddingCoef = 1.3;
selectChart.select('svg').selectAll('.dummy') selectChart.select('svg').selectAll('.dummy')
.data([min, max]) .data([min, max])
.enter().append('text') .enter().append('text')
.text(function (d) { return formatByAxisId(axisId)(d); }) .text(function (d) { return formatByAxisId(axisId)(d); })
.each(function (d, i) { .each(function (d, i) {
widths[i] = this.getBoundingClientRect().width * paddingCoef; lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
}) })
.remove(); .remove();
return widths; return lengths;
} }
function getYFormat(forArc) { function getYFormat(forArc) {
var formatForY = forArc && !hasGaugeType(c3.data.targets) ? defaultArcValueFormat : yFormat, var formatForY = forArc && !hasGaugeType(c3.data.targets) ? defaultArcValueFormat : yFormat,

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
htdocs/samples/data_label.html
Unescape View File

@ -0,0 +1,57 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="/js/d3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['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 chart2 = c3.generate({
bindto: '#chart2',
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
['data1', -190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
x: {
type: 'categorized'
}
},
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save