浮點堆積的條形圖顯示使用增長時隱藏

Question

當我在條形圖上使用“增長”動畫時，顯示隱藏不起作用。

 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> 

更新

我添加了我需要使用的代碼段。 我必須單擊圖例兩次才能重新出現

Answer 1

兩個問題：

1）您需要使用所有選項進行完整的重繪，然后替換

somePlot.setData(someData);
somePlot.setupGrid();
somePlot.draw();

與

data = someData;
plotWithOptions();

在togglePlot()函數中。

2）如果在動畫完成前再次切換，則會損壞數據。 （因為對somePlot.getData();的調用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>