mirror of
https://github.com/Karaka-Management/jsOMS.git
synced 2026-01-29 09:48:40 +00:00
Dimension pull out
This commit is contained in:
parent
6fe8c278df
commit
66e876b9b8
|
|
@ -29,14 +29,9 @@
|
|||
{
|
||||
let percent = d3.format(".1%"),
|
||||
format = d3.time.format("%Y-%m-%d"),
|
||||
box = this.chart.chartSelect.node().getBoundingClientRect(),
|
||||
svg, self = this;
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
|
||||
this.chart.calculateDimension();
|
||||
this.chart.cellSize = Math.min(this.chart.dimension.width / (12*5), this.chart.dimension.height / (8));
|
||||
|
||||
document.getElementById(this.chart.chartId).style.height = (this.chart.dimension.height * this.chart.dataset.length) + 'px';
|
||||
|
|
|
|||
|
|
@ -74,54 +74,15 @@
|
|||
height: box.height
|
||||
};
|
||||
|
||||
x = d3.scale.linear().range([
|
||||
0,
|
||||
this.chart.dimension.width
|
||||
- this.chart.margin.right
|
||||
- this.chart.margin.left
|
||||
]);
|
||||
x = this.chart.createXScale('linear');
|
||||
y = this.chart.createYScale('linear');
|
||||
xAxis1 = this.chart.createXAxis(x);
|
||||
yAxis1 = this.chart.createYAxis(y);
|
||||
xGrid = this.chart.createXGrid(x);
|
||||
yGrid = this.chart.createYGrid(y);
|
||||
|
||||
y = d3.scale.linear().range([
|
||||
this.chart.dimension.height
|
||||
- this.chart.margin.top
|
||||
- this.chart.margin.bottom,
|
||||
10
|
||||
]);
|
||||
|
||||
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size)
|
||||
.innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
|
||||
|
||||
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
|
||||
{
|
||||
return self.chart.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.chart.axis.y.tick.size)
|
||||
.innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
|
||||
|
||||
xGrid = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-(this.chart.dimension.height
|
||||
- this.chart.margin.top - 10
|
||||
- this.chart.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
yGrid = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
//.ticks(0)
|
||||
.tickSize(
|
||||
-this.chart.dimension.width
|
||||
+ this.chart.margin.right
|
||||
+ this.chart.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
|
||||
x.domain(this.chart.dataset[0].points.map(function(d) { return d.name; }));
|
||||
y.domain([0, d3.max(this.chart.dataset[0].points, function(d) { return d.y*1.05; })]);
|
||||
x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
|
||||
y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
|
||||
|
||||
svg = this.chart.chartSelect.append("svg")
|
||||
.attr("width", this.chart.dimension.width)
|
||||
|
|
@ -165,24 +126,6 @@
|
|||
.attr("class", function(d) { return "dataPoint " + (d.y < d.y0 ? 'negative' : 'positive'); })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
|
||||
|
||||
dataPointEnter.append("rect")
|
||||
.attr("y", function(d) { return y( Math.max(d.y0, d.y) ); })
|
||||
.attr("height", function(d) { return Math.abs( y(d.y0) - y(d.y) ); })
|
||||
.attr("width", x.rangeBand());
|
||||
|
||||
dataPointEnter.append("text")
|
||||
.attr("x", x.rangeBand() / 2)
|
||||
.attr("y", function(d) { return y(d.y) + 5; })
|
||||
.attr("dy", function(d) { return ((d.y < d.y0) ? '-' : '') + ".75em" })
|
||||
.text(function(d) { return d.y - d.y0; });
|
||||
|
||||
dataPointEnter.filter(function(d) { return d.class != "total" }).append("line")
|
||||
.attr("class", "connector")
|
||||
.attr("x1", x.rangeBand() + 5 )
|
||||
.attr("y1", function(d) { return y(d.y) } )
|
||||
.attr("x2", x.rangeBand() / ( 1 - 5) - 5 )
|
||||
.attr("y2", function(d) { return y(d.y) } );
|
||||
|
||||
return [dataPointEnter, dataPoint];
|
||||
};
|
||||
}(window.jsOMS = window.jsOMS || {}));
|
||||
|
|
|
|||
|
|
@ -546,7 +546,7 @@
|
|||
return self.axis.x.tick.prefix + d;
|
||||
}).orient("bottom").outerTickSize(self.axis.x.tick.size)
|
||||
.innerTickSize(self.axis.x.tick.size).tickPadding(7);
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createYAxis = function (y) {
|
||||
let self = this;
|
||||
|
|
@ -556,7 +556,7 @@
|
|||
return self.axis.y.tick.prefix + d;
|
||||
}).orient("left").outerTickSize(this.axis.y.tick.size)
|
||||
.innerTickSize(this.axis.y.tick.size).tickPadding(7);
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createXGrid = function (x) {
|
||||
return d3.svg.axis()
|
||||
|
|
@ -568,7 +568,7 @@
|
|||
- this.margin.top - 10
|
||||
- this.margin.bottom), 0, 0)
|
||||
.tickFormat("");
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.createYGrid = function (y) {
|
||||
return d3.svg.axis()
|
||||
|
|
@ -580,7 +580,17 @@
|
|||
+ this.margin.right
|
||||
+ this.margin.left, 0, 0)
|
||||
.tickFormat("");
|
||||
}
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.calculateDimension = function ()
|
||||
{
|
||||
let box = this.chartSelect.node().getBoundingClientRect()
|
||||
|
||||
this.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
};
|
||||
|
||||
jsOMS.Chart.ChartAbstract.prototype.clean = function ()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
jsOMS.Chart.ColumnChart.prototype.draw = function ()
|
||||
{
|
||||
let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
|
||||
let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
|
||||
|
||||
if (this.chart.subtype === 'grouped') {
|
||||
this.chart.axis.y.max = d3.max(this.chart.dataset, function (layer)
|
||||
|
|
@ -89,10 +89,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
this.chart.calculateDimension();
|
||||
|
||||
x = this.chart.createXScale('ordinal');
|
||||
y = this.chart.createYScale('linear');
|
||||
|
|
|
|||
|
|
@ -68,12 +68,9 @@
|
|||
|
||||
jsOMS.Chart.LineChart.prototype.draw = function ()
|
||||
{
|
||||
let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
|
||||
let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
this.chart.calculateDimension('linear');
|
||||
|
||||
x = this.chart.createXScale('linear');
|
||||
y = this.chart.createYScale('linear');
|
||||
|
|
|
|||
|
|
@ -21,12 +21,9 @@
|
|||
|
||||
jsOMS.Chart.PieChart.prototype.draw = function ()
|
||||
{
|
||||
let svg, arc, box = this.chart.chartSelect.node().getBoundingClientRect();
|
||||
let svg, arc;
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
this.chart.calculateDimension();
|
||||
|
||||
let radius = (
|
||||
Math.min(this.chart.dimension.width, this.chart.dimension.height) / 2
|
||||
|
|
|
|||
|
|
@ -67,12 +67,9 @@
|
|||
|
||||
jsOMS.Chart.ScatterplotChart.prototype.draw = function ()
|
||||
{
|
||||
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
|
||||
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
this.chart.calculateDimension('linear');
|
||||
|
||||
x = this.chart.createXScale('linear');
|
||||
y = this.chart.createYScale('linear');
|
||||
|
|
|
|||
|
|
@ -79,12 +79,9 @@
|
|||
|
||||
jsOMS.Chart.WaterfallChart.prototype.draw = function ()
|
||||
{
|
||||
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
|
||||
let bar, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this;
|
||||
|
||||
this.chart.dimension = {
|
||||
width: box.width,
|
||||
height: box.height
|
||||
};
|
||||
this.chart.calculateDimension();
|
||||
|
||||
x = this.chart.createXScale('ordinal');
|
||||
y = this.chart.createYScale('linear');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user