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

Subchart bar refactoring, allow negative values

pull/30/head
mikhail samoilov 11 years ago
parent
0988b8deb3
commit
6d1bacd944
3 changed files with 40 additions and 45 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. 1
      .gitignore
  2. 42
      c3.js
  3. 42
      htdocs/samples/chart_bar_stacked.html

1
.gitignore vendored
Unescape View File

@ -1,2 +1,3 @@
# npm modules
node_modules
bower_components

42
c3.js
Unescape View File

@ -1938,18 +1938,16 @@
// bars
var barOnMain = function (isSub) {
var drawBar = function (isSub) {
var barW = getBarW(xAxis, barTargetsNum, !!isSub),
barX = getBarX(barW, barTargetsNum, barIndices),
barY = getBarY(!!isSub),
barOffset = getBarOffset(barIndices);
x = getBarX(barW, barTargetsNum, barIndices, !!isSub),
y = getBarY(!!isSub),
barOffset = getBarOffset(barIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale;
return function (d, i) {
var y = barY;
var x = barX;
var y0 = getYScale(d.id)(0),
offset = barOffset(d, i) || y0; // offset is for stacked bar chart, by default
var y0 = yScale(d.id)(0),
offset = barOffset(d, i) || y0; // offset is for stacked bar chart
// 4 points that make a bar
var points = [
@ -1977,16 +1975,14 @@
.data(barData);
mainBar.enter().append('path')
.attr('d', barOnMain(false))
.attr('d', drawBar(false))
.style("stroke", 'none')
.style("fill", function (d) { return color(d.id); })
.attr("class", classBar);
mainBar
.style("opacity", 0)
.transition().duration(duration)
.attr('d', barOnMain(false))
.style('opacity', 1);
.attr('d', drawBar(false));
mainBar.exit().transition().duration(duration)
.style('opacity', 0)
@ -2058,21 +2054,19 @@
brush.extent(x.orgDomain()).update();
}
// bars
barW = getBarW(subXAxis, barTargetsNum, true);
barH = getBarH(height2, true);
barX = getBarX(barW, barTargetsNum, barIndices, true);
barY = getBarY(barH, barIndices, false, true);
contextBar = context.selectAll('.-bars').selectAll('.-bar')
.data(barData);
contextBar.transition().duration(duration)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH);
contextBar.enter().append('rect')
.attr("class", classBar)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
contextBar.enter().append('path')
.attr('d', drawBar(true))
.style("stroke", 'none')
.style("fill", function (d) { return color(d.id); })
.attr("class", classBar);
contextBar
.style("opacity", 0)
.transition()
.transition().duration(duration)
.attr('d', drawBar(true))
.style('opacity', 1);
contextBar.exit().transition()
contextBar.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
// lines

42
htdocs/samples/chart_bar_stacked.html
Unescape View File

@ -1,33 +1,33 @@
<html>
<head>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'bar',
data2: 'bar'
},
groups: [
['data1', 'data2']
]
columns: [
['data1', 30, 200, 200, 400, 150, 250],
['data2', 130, -100, 100, 200, 150, 50]
],
types: {
data1: 'bar',
data2: 'bar'
},
groups: [
['data1', 'data2']
]
},
axis: {
x: {
type: 'categorized'
}
}
});
</script>
</body>
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save