Skip to content

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

Fix y padding for data label - #295

parent ed534fc5
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 7 deletions
c3.js
View file @ 9a67dce2
......@@ -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, widths, diff, ratio,
yDomainAbs, lengths, diff, ratio,
showHorizontalDataLabel = hasDataLabel() && __axis_rotated;
if (yTargets.length === 0) { // use current domain if target of axisId is none
return axisId === 'y2' ? y2.domain() : y.domain();
......@@ -1234,11 +1234,15 @@
}
// add padding for data label
if (showHorizontalDataLabel) {
widths = getDataLabelWidth(yDomainMin, yDomainMax, axisId);
lengths = getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width');
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_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) {
padding_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength);
......@@ -1806,17 +1810,17 @@
}
return false;
}
function getDataLabelWidth(min, max, axisId) {
var widths = [], paddingCoef = 1.3;
function getDataLabelLength(min, max, axisId, key) {
var lengths = [0, 0], paddingCoef = 1.3;
selectChart.select('svg').selectAll('.dummy')
.data([min, max])
.enter().append('text')
.text(function (d) { return formatByAxisId(axisId)(d); })
.each(function (d, i) {
widths[i] = this.getBoundingClientRect().width * paddingCoef;
lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
})
.remove();
return widths;
return lengths;
}
function getYFormat(forArc) {
var formatForY = forArc && !hasGaugeType(c3.data.targets) ? defaultArcValueFormat : yFormat,
......
c3.min.js
View file @ 9a67dce2
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/data_label.html 0 → 100644
View file @ 9a67dce2
<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>
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