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

Fix grid height when padding.top specified - #368

pull/373/merge
Masayuki Tanaka 11 years ago
parent
ed67f04e79
commit
6f2091f23c
3 changed files with 70 additions and 144 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. 4
      c3.js
  2. 4
      c3.min.js
  3. 206
      htdocs/samples/padding.html

4
c3.js
Unescape View File

@ -523,7 +523,7 @@
main.select('line.' + CLASS.xgridFocus)
.attr("x1", __axis_rotated ? 0 : -10)
.attr("x2", __axis_rotated ? width : -10)
.attr("y1", __axis_rotated ? -10 : margin.top)
.attr("y1", __axis_rotated ? -10 : 0)
.attr("y2", __axis_rotated ? -10 : height);
}
function updateRadius() {
@ -3627,7 +3627,7 @@
} : {
'x1': function (d) { return x(d) + tickOffset; },
'x2': function (d) { return x(d) + tickOffset; },
'y1': margin.top,
'y1': 0,
'y2': height
};
// this is used to flow

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

206
htdocs/samples/padding.html
Unescape View File

@ -15,13 +15,17 @@
<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"></div>
<div id="chart10"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
var option = {
padding: {
top: 50,
right: 200,
@ -52,160 +56,82 @@
position: 'outer-center'
}
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
legend: {
position: 'right'
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart3 = c3.generate({
bindto: '#chart3',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
position: 'bottom'
},
subchart: {
show: true
show: false
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
grid: {
x: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
var chart4 = c3.generate({
bindto: '#chart4',
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
legend: {
position: 'right'
},
subchart: {
show: true
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
};
var chart5 = c3.generate({
bindto: '#chart5',
padding: {
option.bindto = '#chart1';
var chart1 = c3.generate(option);
option.bindto = '#chart2';
option.legend.position = 'right'
var chart2 = c3.generate(option);
option.bindto = '#chart3';
option.legend.position = 'bottom';
option.subchart.show = true;
var chart3 = c3.generate(option);
option.bindto = '#chart4';
option.legend.position = 'right';
option.subchart.show = true;
var chart4 = c3.generate(option);
option.bindto = '#chart5';
option.padding = {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
};
option.subchart.show = false;
option.legend.position = 'bottom';
var chart5 = c3.generate(option);
option.axis.rotated = false;
option.bindto = '#chart6';
var chart6 = c3.generate(option);
option.bindto = '#chart7';
option.legend.position = 'right'
var chart7 = c3.generate(option);
option.bindto = '#chart8';
option.legend.position = 'bottom';
option.subchart.show = true;
var chart8 = c3.generate(option);
option.bindto = '#chart9';
option.legend.position = 'right';
option.subchart.show = true;
var chart9 = c3.generate(option);
option.bindto = '#chart10';
option.padding = {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
option.subchart.show = false;
option.legend.position = 'bottom';
var chart10 = c3.generate(option);
</script>
</body>

Write Preview
Loading…
Cancel
Save