flot 堆叠条形图在使用 grow 时显示隐藏
flot stacked bar graph show hide when using grow
当我在我的条形图上使用增长动画时，显示隐藏不起作用。
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
var stack = 0,
bars = true,
lines = false,
steps = false;
togglePlot = function(seriesIdx) {
var someData = somePlot.getData();
someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
if (someData[seriesIdx].stack == 1)
someData[seriesIdx].stack = 0;
else if (someData[seriesIdx].stack == 0)
someData[seriesIdx].stack = 1;
somePlot.setData(someData);
somePlot.setupGrid();
somePlot.draw();
}
var somePlot;
var data = [{
label: "d1",
data: d1,
color: 0,
idx: 0,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d2",
data: d2,
color: 1,
idx: 1,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d3",
data: d3,
color: 2,
idx: 2,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}];
function plotWithOptions() {
somePlot = $.plot("#placeholder", data, {
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps
},
bars: {
show: bars,
barWidth: 0.6
},
grow: {
active: true,
duration: 2000
}
},
legend: {
labelFormatter: function(label, series) {
return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
},
noColumns: 4,
}
});
}
plotWithOptions();
var somePlotIncidents = null,
somePlotMttr = null,
somePlotRepeat = null;
var stack = 0,
bars = true,
lines = false,
steps = false,
timeOut = false;
var options = {
"series": {
"stack": 0,
"lines": {
"show": false,
"steps": false
},
"bars": {
"show": true,
"fill": 1,
"align": "center",
"lineWidth": 0,
"barWidth": 25920000.000000007
},
"grow": {
"active": true,
"duration": 2000
}
},
"xaxis": {
"mode": "time",
"autoscaleMargin": null,
"timeformat": "%d %b",
"tickSize": [1, "day"]
},
"yaxis": {
"min": 0,
"minTickSize": 1
},
"grid": {
"clickable": true,
"hoverable": true
},
"legend": {
"noColumns": 3
}
};
var datasets = [{"label":"P1","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#808080","idx":0,"data":[{"0":1456704059000,"1":0},{"0":1456617659000,"1":0},{"0":1456531259000,"1":0},{"0":1456444859000,"1":0},{"0":1456358459000,"1":2},{"0":1456272059000,"1":0},{"0":1456185659000,"1":1},{"0":1456099259000,"1":0},{"0":1456012859000,"1":0},{"0":1455926459000,"1":0},{"0":1455840059000,"1":1},{"0":1455753659000,"1":1},{"0":1455667259000,"1":0},{"0":1455580859000,"1":0},{"0":1455494459000,"1":0},{"0":1455408059000,"1":0},{"0":1455321659000,"1":0},{"0":1455235259000,"1":0},{"0":1455148859000,"1":0},{"0":1455062459000,"1":0},{"0":1454976059000,"1":1},{"0":1454889659000,"1":1},{"0":1454803259000,"1":0},{"0":1454716859000,"1":0},{"0":1454630459000,"1":0},{"0":1454544059000,"1":0},{"0":1454457659000,"1":1},{"0":1454371259000,"1":1},{"0":1454284859000,"1":1}]},{"label":"P2","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#f00","idx":1,"data":[{"0":1456704059000,"1":1},{"0":1456617659000,"1":1},{"0":1456531259000,"1":1},{"0":1456444859000,"1":0},{"0":1456358459000,"1":4},{"0":1456272059000,"1":2},{"0":1456185659000,"1":1},{"0":1456099259000,"1":1},{"0":1456012859000,"1":1},{"0":1455926459000,"1":0},{"0":1455840059000,"1":1},{"0":1455753659000,"1":2},{"0":1455667259000,"1":1},{"0":1455580859000,"1":3},{"0":1455494459000,"1":1},{"0":1455408059000,"1":0},{"0":1455321659000,"1":0},{"0":1455235259000,"1":2},{"0":1455148859000,"1":1},{"0":1455062459000,"1":1},{"0":1454976059000,"1":0},{"0":1454889659000,"1":0},{"0":1454803259000,"1":0},{"0":1454716859000,"1":0},{"0":1454630459000,"1":0},{"0":1454544059000,"1":0},{"0":1454457659000,"1":0},{"0":1454371259000,"1":2},{"0":1454284859000,"1":0}]},{"label":"P3","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#ffa500","idx":2,"data":[{"0":1456704059000,"1":2},{"0":1456617659000,"1":1},{"0":1456531259000,"1":1},{"0":1456444859000,"1":1},{"0":1456358459000,"1":0},{"0":1456272059000,"1":1},{"0":1456185659000,"1":0},{"0":1456099259000,"1":1},{"0":1456012859000,"1":1},{"0":1455926459000,"1":0},{"0":1455840059000,"1":3},{"0":1455753659000,"1":0},{"0":1455667259000,"1":0},{"0":1455580859000,"1":0},{"0":1455494459000,"1":2},{"0":1455408059000,"1":1},{"0":1455321659000,"1":0},{"0":1455235259000,"1":1},{"0":1455148859000,"1":0},{"0":1455062459000,"1":1},{"0":1454976059000,"1":2},{"0":1454889659000,"1":0},{"0":1454803259000,"1":1},{"0":1454716859000,"1":0},{"0":1454630459000,"1":1},{"0":1454544059000,"1":0},{"0":1454457659000,"1":0},{"0":1454371259000,"1":1},{"0":1454284859000,"1":0}]}];
togglePlotPie = function(seriesIdx) {
if (timeOut) {
return;
}
timeOut = true;
var someData = somePlotIncidents.getData();
someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
if (someData[seriesIdx].stack == 1)
someData[seriesIdx].stack = 0;
else if (someData[seriesIdx].stack == 0)
someData[seriesIdx].stack = 1;
data = someData;
plot_graph(data, "incidents");
setTimeout(function() {
timeOut = false;
}, 2000);
//somePlotIncidents.setData(someData);
//somePlotIncidents.setupGrid();
//somePlotIncidents.draw();
}
function plot_graph(datasets, id) {
if (id == "incidents") {
options.legend.labelFormatter = function(label, series) {
return '<a href="#" onClick="togglePlotPie(' + series.idx + '); return false;">' + label + '</a>';
};
console.log(JSON.stringify(datasets));
console.log(JSON.stringify(options));
somePlotIncidents = $.plot($("#" + id + "network-graph"), datasets,
options);
}
}
plot_graph(datasets, "incidents");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="http://thgreasi.github.io/growraf/javascripts/jquery.flot.growraf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>
<div id="incidentsnetwork-graph" class="demo-placeholder" style="width:650px;height:400px"></div>
更新
我已经添加了我需要的代码片段。我必须点击图例两次才能重新出现
两期：
1) 您需要对所有选项进行完整重绘，替换
somePlot.setData(someData);
somePlot.setupGrid();
somePlot.draw();
和
data = someData;
plotWithOptions();
在 togglePlot() 函数内。
2) 如果您在动画结束前再次切换，您会得到损坏的数据。 （因为对 somePlot.getData(); 的调用获取的是当前动画数据，这不是最终数据。）您可以通过停用超时切换来防止这种情况发生：
togglePlot = function(seriesIdx) {
if (timeOut) {
return;
}
timeOut = true;
... // rest of the code
setTimeout(function() {
timeOut = false;
}, 2000);
}
查看下面更新的代码片段以获取完整代码：
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
var stack = 0,
bars = true,
lines = false,
steps = false,
timeOut = false;
togglePlot = function(seriesIdx) {
if (timeOut) {
return;
}
timeOut = true;
var someData = somePlot.getData();
someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
if (someData[seriesIdx].stack == 1)
someData[seriesIdx].stack = 0;
else if (someData[seriesIdx].stack == 0)
someData[seriesIdx].stack = 1;
data = someData;
plotWithOptions();
setTimeout(function() {
timeOut = false;
}, 2000);
}
var somePlot;
var data = [{
label: "d1",
data: d1,
color: 0,
idx: 0,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d2",
data: d2,
color: 1,
idx: 1,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d3",
data: d3,
color: 2,
idx: 2,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}];
function plotWithOptions() {
somePlot = $.plot("#placeholder", data, {
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps
},
bars: {
show: bars,
barWidth: 0.6
},
grow: {
active: true,
duration: 2000
}
},
legend: {
labelFormatter: function(label, series) {
return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
},
noColumns: 4,
}
});
}
plotWithOptions();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="http://thgreasi.github.io/growraf/javascripts/jquery.flot.growraf.js"></script>
<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>
当我在我的条形图上使用增长动画时，显示隐藏不起作用。
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
var stack = 0,
bars = true,
lines = false,
steps = false;
togglePlot = function(seriesIdx) {
var someData = somePlot.getData();
someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
if (someData[seriesIdx].stack == 1)
someData[seriesIdx].stack = 0;
else if (someData[seriesIdx].stack == 0)
someData[seriesIdx].stack = 1;
somePlot.setData(someData);
somePlot.setupGrid();
somePlot.draw();
}
var somePlot;
var data = [{
label: "d1",
data: d1,
color: 0,
idx: 0,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d2",
data: d2,
color: 1,
idx: 1,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d3",
data: d3,
color: 2,
idx: 2,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}];
function plotWithOptions() {
somePlot = $.plot("#placeholder", data, {
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps
},
bars: {
show: bars,
barWidth: 0.6
},
grow: {
active: true,
duration: 2000
}
},
legend: {
labelFormatter: function(label, series) {
return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
},
noColumns: 4,
}
});
}
plotWithOptions();
var somePlotIncidents = null,
somePlotMttr = null,
somePlotRepeat = null;
var stack = 0,
bars = true,
lines = false,
steps = false,
timeOut = false;
var options = {
"series": {
"stack": 0,
"lines": {
"show": false,
"steps": false
},
"bars": {
"show": true,
"fill": 1,
"align": "center",
"lineWidth": 0,
"barWidth": 25920000.000000007
},
"grow": {
"active": true,
"duration": 2000
}
},
"xaxis": {
"mode": "time",
"autoscaleMargin": null,
"timeformat": "%d %b",
"tickSize": [1, "day"]
},
"yaxis": {
"min": 0,
"minTickSize": 1
},
"grid": {
"clickable": true,
"hoverable": true
},
"legend": {
"noColumns": 3
}
};
var datasets = [{"label":"P1","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#808080","idx":0,"data":[{"0":1456704059000,"1":0},{"0":1456617659000,"1":0},{"0":1456531259000,"1":0},{"0":1456444859000,"1":0},{"0":1456358459000,"1":2},{"0":1456272059000,"1":0},{"0":1456185659000,"1":1},{"0":1456099259000,"1":0},{"0":1456012859000,"1":0},{"0":1455926459000,"1":0},{"0":1455840059000,"1":1},{"0":1455753659000,"1":1},{"0":1455667259000,"1":0},{"0":1455580859000,"1":0},{"0":1455494459000,"1":0},{"0":1455408059000,"1":0},{"0":1455321659000,"1":0},{"0":1455235259000,"1":0},{"0":1455148859000,"1":0},{"0":1455062459000,"1":0},{"0":1454976059000,"1":1},{"0":1454889659000,"1":1},{"0":1454803259000,"1":0},{"0":1454716859000,"1":0},{"0":1454630459000,"1":0},{"0":1454544059000,"1":0},{"0":1454457659000,"1":1},{"0":1454371259000,"1":1},{"0":1454284859000,"1":1}]},{"label":"P2","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#f00","idx":1,"data":[{"0":1456704059000,"1":1},{"0":1456617659000,"1":1},{"0":1456531259000,"1":1},{"0":1456444859000,"1":0},{"0":1456358459000,"1":4},{"0":1456272059000,"1":2},{"0":1456185659000,"1":1},{"0":1456099259000,"1":1},{"0":1456012859000,"1":1},{"0":1455926459000,"1":0},{"0":1455840059000,"1":1},{"0":1455753659000,"1":2},{"0":1455667259000,"1":1},{"0":1455580859000,"1":3},{"0":1455494459000,"1":1},{"0":1455408059000,"1":0},{"0":1455321659000,"1":0},{"0":1455235259000,"1":2},{"0":1455148859000,"1":1},{"0":1455062459000,"1":1},{"0":1454976059000,"1":0},{"0":1454889659000,"1":0},{"0":1454803259000,"1":0},{"0":1454716859000,"1":0},{"0":1454630459000,"1":0},{"0":1454544059000,"1":0},{"0":1454457659000,"1":0},{"0":1454371259000,"1":2},{"0":1454284859000,"1":0}]},{"label":"P3","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#ffa500","idx":2,"data":[{"0":1456704059000,"1":2},{"0":1456617659000,"1":1},{"0":1456531259000,"1":1},{"0":1456444859000,"1":1},{"0":1456358459000,"1":0},{"0":1456272059000,"1":1},{"0":1456185659000,"1":0},{"0":1456099259000,"1":1},{"0":1456012859000,"1":1},{"0":1455926459000,"1":0},{"0":1455840059000,"1":3},{"0":1455753659000,"1":0},{"0":1455667259000,"1":0},{"0":1455580859000,"1":0},{"0":1455494459000,"1":2},{"0":1455408059000,"1":1},{"0":1455321659000,"1":0},{"0":1455235259000,"1":1},{"0":1455148859000,"1":0},{"0":1455062459000,"1":1},{"0":1454976059000,"1":2},{"0":1454889659000,"1":0},{"0":1454803259000,"1":1},{"0":1454716859000,"1":0},{"0":1454630459000,"1":1},{"0":1454544059000,"1":0},{"0":1454457659000,"1":0},{"0":1454371259000,"1":1},{"0":1454284859000,"1":0}]}];
togglePlotPie = function(seriesIdx) {
if (timeOut) {
return;
}
timeOut = true;
var someData = somePlotIncidents.getData();
someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
if (someData[seriesIdx].stack == 1)
someData[seriesIdx].stack = 0;
else if (someData[seriesIdx].stack == 0)
someData[seriesIdx].stack = 1;
data = someData;
plot_graph(data, "incidents");
setTimeout(function() {
timeOut = false;
}, 2000);
//somePlotIncidents.setData(someData);
//somePlotIncidents.setupGrid();
//somePlotIncidents.draw();
}
function plot_graph(datasets, id) {
if (id == "incidents") {
options.legend.labelFormatter = function(label, series) {
return '<a href="#" onClick="togglePlotPie(' + series.idx + '); return false;">' + label + '</a>';
};
console.log(JSON.stringify(datasets));
console.log(JSON.stringify(options));
somePlotIncidents = $.plot($("#" + id + "network-graph"), datasets,
options);
}
}
plot_graph(datasets, "incidents");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="http://thgreasi.github.io/growraf/javascripts/jquery.flot.growraf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>
<div id="incidentsnetwork-graph" class="demo-placeholder" style="width:650px;height:400px"></div>
更新
我已经添加了我需要的代码片段。我必须点击图例两次才能重新出现
两期：
1) 您需要对所有选项进行完整重绘，替换
somePlot.setData(someData);
somePlot.setupGrid();
somePlot.draw();
和
data = someData;
plotWithOptions();
在 togglePlot() 函数内。
2) 如果您在动画结束前再次切换，您会得到损坏的数据。 （因为对 somePlot.getData(); 的调用获取的是当前动画数据，这不是最终数据。）您可以通过停用超时切换来防止这种情况发生：
togglePlot = function(seriesIdx) {
if (timeOut) {
return;
}
timeOut = true;
... // rest of the code
setTimeout(function() {
timeOut = false;
}, 2000);
}
查看下面更新的代码片段以获取完整代码：
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
var stack = 0,
bars = true,
lines = false,
steps = false,
timeOut = false;
togglePlot = function(seriesIdx) {
if (timeOut) {
return;
}
timeOut = true;
var someData = somePlot.getData();
someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
if (someData[seriesIdx].stack == 1)
someData[seriesIdx].stack = 0;
else if (someData[seriesIdx].stack == 0)
someData[seriesIdx].stack = 1;
data = someData;
plotWithOptions();
setTimeout(function() {
timeOut = false;
}, 2000);
}
var somePlot;
var data = [{
label: "d1",
data: d1,
color: 0,
idx: 0,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d2",
data: d2,
color: 1,
idx: 1,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}, {
label: "d3",
data: d3,
color: 2,
idx: 2,
grow: {
growings: [{
stepMode: "maximum"
}]
}
}];
function plotWithOptions() {
somePlot = $.plot("#placeholder", data, {
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps
},
bars: {
show: bars,
barWidth: 0.6
},
grow: {
active: true,
duration: 2000
}
},
legend: {
labelFormatter: function(label, series) {
return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
},
noColumns: 4,
}
});
}
plotWithOptions();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="http://thgreasi.github.io/growraf/javascripts/jquery.flot.growraf.js"></script>
<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>