Browse Source

Cancel zerobased if axis.y.min/max specified - #454

pull/1616/head
Masayuki Tanaka 10 years ago
parent
commit
7ee85d696a
  1. 13
      c3.js
  2. 8
      c3.min.js
  3. 43
      htdocs/samples/chart_area.html
  4. 4
      src/config.js
  5. 9
      src/domain.js

13
c3.js

@ -964,7 +964,7 @@
axis_y_label: {},
axis_y_tick_format: undefined,
axis_y_tick_outer: true,
axis_y_padding: undefined,
axis_y_padding: {},
axis_y_ticks: 10,
axis_y2_show: false,
axis_y2_max: undefined,
@ -973,7 +973,7 @@
axis_y2_label: {},
axis_y2_tick_format: undefined,
axis_y2_tick_outer: true,
axis_y2_padding: undefined,
axis_y2_padding: {},
axis_y2_ticks: 10,
// grid
grid_x_show: false,
@ -1243,6 +1243,11 @@
isAllPositive = yDomainMin >= 0 && yDomainMax >= 0;
isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
// Cancel zerobased if axis_*_min / axis_*_max specified
if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) {
isZeroBased = false;
}
// Bar/Area chart should be 0-based if all positive|negative
if (isZeroBased) {
if (isAllPositive) { yDomainMin = 0; }
@ -1269,11 +1274,11 @@
padding_top += lengths[1];
padding_bottom += lengths[0];
}
if (axisId === 'y' && config.axis_y_padding) {
if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength);
}
if (axisId === 'y2' && config.axis_y2_padding) {
if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength);
}

8
c3.min.js vendored

File diff suppressed because one or more lines are too long

43
htdocs/samples/chart_area.html

@ -3,9 +3,16 @@
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>Zerobased</h3>
<div id="chart1"></div>
<h3>Not zerobased because of axis.y.min</h3>
<div id="chart2"></div>
<h3>Zerobased</h3>
<div id="chart3"></div>
<h3>Not zerobased because of axis.y.min</h3>
<div id="chart4"></div>
<h3>+/- vaulues</h3>
<div id="chart5"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
@ -26,15 +33,47 @@
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area'
},
axis: {
y: {
min: 100,
}
},
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area'
}
});
var chart4 = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area'
},
axis: {
y: {
max: -100,
}
}
});
var chart5 = c3.generate({
bindto: '#chart5',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],

4
src/config.js

@ -100,7 +100,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y_label: {},
axis_y_tick_format: undefined,
axis_y_tick_outer: true,
axis_y_padding: undefined,
axis_y_padding: {},
axis_y_ticks: 10,
axis_y2_show: false,
axis_y2_max: undefined,
@ -109,7 +109,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y2_label: {},
axis_y2_tick_format: undefined,
axis_y2_tick_outer: true,
axis_y2_padding: undefined,
axis_y2_padding: {},
axis_y2_ticks: 10,
// grid
grid_x_show: false,

9
src/domain.js

@ -82,6 +82,11 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
isAllPositive = yDomainMin >= 0 && yDomainMax >= 0;
isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
// Cancel zerobased if axis_*_min / axis_*_max specified
if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) {
isZeroBased = false;
}
// Bar/Area chart should be 0-based if all positive|negative
if (isZeroBased) {
if (isAllPositive) { yDomainMin = 0; }
@ -108,11 +113,11 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
padding_top += lengths[1];
padding_bottom += lengths[0];
}
if (axisId === 'y' && config.axis_y_padding) {
if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength);
}
if (axisId === 'y2' && config.axis_y2_padding) {
if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength);
}

Loading…
Cancel
Save