Question

当我在条形图上使用grow for animation时，show hide不起作用。

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();的调用获取的当前动画数据不是最终数据。）您可以通过超时停用切换来阻止此操作：

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>

flot堆积条形图显示隐藏使用增长时

1 个答案: