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
Unified 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 # npm modules
node_modules node_modules
bower_components

42
c3.js
Unescape View File

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

42
htdocs/samples/chart_bar_stacked.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save