1

Drawing bar graphs

This commit is contained in:
Alex Yatskov 2014-10-31 15:25:59 +09:00
parent b0537f718a
commit 761ea5a605
2 changed files with 70 additions and 23 deletions

View File

@ -72,8 +72,7 @@
ctx.grapher = new grapher.Grapher({ ctx.grapher = new grapher.Grapher({
canvas: new Snap('#svg'), canvas: new Snap('#svg'),
columnRange: ctx.searchRange, range: ctx.searchRange,
columnWidth: 150,
useLocalScale: true, useLocalScale: true,
useRelativeScale: true useRelativeScale: true
}); });

View File

@ -113,12 +113,54 @@
this.updateShapes = function() { this.updateShapes = function() {
var gradient = this.canvas.gradient('l(0, 0, 0, 1)#000-#fff'); var gradient = this.canvas.gradient('l(0, 0, 0, 1)#000-#fff');
this.canvas.rect(5, 0, 90, 490).attr({'stroke': '#d3d7cf', 'fill': '#eeeeec'}); function logger(e, x, y) {
this.canvas.rect(5, 0, 90, 245).attr({'fill': '#cc0000'}); // var rect = e.srcElement;
this.canvas.rect(90, 0, 10, 490).attr({'stroke': '#d3d7cf', 'fill': gradient}); // console.log(rect.getBoundingClientRect());
this.canvas.rect(0, 490, 100, 20).attr({'fill': '#d3d7cf'}); }
this.canvas.line(0, 245, 5, 245).attr({'stroke': '#888a85'});
this.canvas.text(55, 500, this.name).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'}); var backdrop = this.canvas.rect(
this.tickSize,
0,
this.width - (this.densitySize + this.tickSize),
this.height - this.panelSize
).attr({'stroke': '#d3d7cf', 'fill': '#eeeeec'});
var value = this.canvas.rect(
this.tickSize,
0,
this.width - (this.densitySize + this.tickSize),
50
).attr({'fill': '#cc0000'});
var density = this.canvas.rect(
this.width - this.densitySize,
0,
this.densitySize,
this.height - this.panelSize
).attr({'stroke': '#d3d7cf', 'fill': gradient});
var tick = this.canvas.line(
0,
(this.height - this.panelSize) / 2,
this.tickSize,
(this.height - this.panelSize) / 2
).attr({'stroke': '#888a85'});
var panel = this.canvas.rect(
this.tickSize,
this.height - this.panelSize,
this.width - this.tickSize,
this.panelSize
).attr({'fill': '#d3d7cf'});
var label = this.canvas.text(
this.tickSize + (this.width - this.tickSize) / 2,
this.height - this.panelSize / 2,
this.name
).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'});
var group = this.canvas.group(backdrop, value, density, panel, tick, label);
group.transform(Snap.format('t {x}, {y}', {x: this.index * (this.width + this.padding), y: 0}));
}; };
this.decimateHints = function(hints, steps, scale) { this.decimateHints = function(hints, steps, scale) {
@ -205,12 +247,14 @@
DRAG: 2 DRAG: 2
}; };
this.handleSize = 10;
this.desatOffset = -0.3; this.desatOffset = -0.3;
this.hintSize = 10; this.handleSize = 10;
this.labelFontSize = 15; this.densitySize = 10;
this.labelSize = 20; this.panelSize = 20;
this.tickLength = 5; this.tickSize = 5;
this.width = 125;
this.height = 500;
this.padding = 10;
this.emptyColor = '#eeeeec'; this.emptyColor = '#eeeeec';
this.strokeColor = '#d3d7cf'; this.strokeColor = '#d3d7cf';
this.tickColor = '#888a85'; this.tickColor = '#888a85';
@ -224,6 +268,7 @@
this.data = params.data; this.data = params.data;
this.scale = params.scale; this.scale = params.scale;
this.range = params.range; this.range = params.range;
this.index = params.index;
this.state = this.State.NORMAL; this.state = this.State.NORMAL;
this.updateShapes(); this.updateShapes();
@ -242,8 +287,9 @@
scale = this.computeGlobalScale(hintData); scale = this.computeGlobalScale(hintData);
} }
var index = 0;
for (var name in columns) { for (var name in columns) {
var data = columns[name]; var data = this.data[name] = columns[name];
if (useLocalScale) { if (useLocalScale) {
scale = this.computeLocalScale(data.hints); scale = this.computeLocalScale(data.hints);
} }
@ -255,10 +301,14 @@
else { else {
this.columns[name] = new Column({ this.columns[name] = new Column({
canvas: this.canvas, canvas: this.canvas,
width: this.columnWidth,
height: this.columnHeight,
padding: this.columnPadding,
range: this.range,
data: column, data: column,
name: name, name: name,
range: this.range,
scale: scale, scale: scale,
index: index++,
}); });
} }
} }
@ -306,11 +356,9 @@
}; };
this.canvas = params.canvas; this.canvas = params.canvas;
this.columnData = null;
this.columnPadding = params.columnPadding || 10;
this.columnRange = new Range(-1.0, 1.0);
this.columnWidth = params.columnWidth || 100;
this.columns = {}; this.columns = {};
this.data = {};
this.range = new Range(-1.0, 1.0);
this.useLocalScale = params.useLocalScale || true; this.useLocalScale = params.useLocalScale || true;
this.useRelativeScale = params.useRelativeScale || true; this.useRelativeScale = params.useRelativeScale || true;
}; };