带有阈值和曲线插件的 flot toggle 系列

Question

var datasets = [{"label":"IT","curvedLines":{"apply":true},"threshold":[{"below":100,"color":"rgb(204, 0, 0)"},{"below":98,"color":"rgb(237, 194, 64)"}],"color":"rgb(237, 194, 64)","idx":0,"data":[{"0":1433156400000,"1":98.03},{"0":1435748400000,"1":98.04},{"0":1438426800000,"1":96.1},{"0":1441105200000,"1":97.87},{"0":1443697200000,"1":97.88},{"0":1446379200000,"1":98.07},{"0":1448971200000,"1":99.38},{"0":1451649600000,"1":99.1}]},{"label":"Network","curvedLines":{"apply":true},"threshold":[{"below":100,"color":"rgb(204, 0, 0)"},{"below":98,"color":"rgb(175, 216, 248)"}],"color":"rgb(175, 216, 248)","idx":1,"data":[{"0":1433156400000,"1":95.07},{"0":1435748400000,"1":97.8},{"0":1438426800000,"1":96.72},{"0":1441105200000,"1":97.62},{"0":1443697200000,"1":97.68},{"0":1446379200000,"1":98.49},{"0":1448971200000,"1":98.59},{"0":1451649600000,"1":98.7}]},{"label":"Success Rate","curvedLines":{"apply":true},"threshold":[{"below":100,"color":"rgb(204, 0, 0)"},{"below":98,"color":"rgb(148, 64, 237)"}],"color":"rgb(148, 64, 237)","idx":2,"data":[{"0":1433156400000,"1":95.18},{"0":1435748400000,"1":96.95},{"0":1438426800000,"1":95.96},{"0":1441105200000,"1":96.99},{"0":1443697200000,"1":96.93},{"0":1446379200000,"1":97.68},{"0":1448971200000,"1":98.58},{"0":1451649600000,"1":98.29}]}];

var options = {"series":{"lines":{"show":true},"curvedLines":{"active":true}},"xaxis":{"mode":"time","tickSize":[1,"month"],"timeformat":"%b %y"},"grid":{"clickable":true,"hoverable":true},"legend":{"noColumns":3,"show":true}};

var somePlotSuccess = null;

togglePlotSuccess = function(seriesIdx) {
 var someData = somePlotSuccess.getData();
 //console.log(seriesIdx);
 //console.log(someData[seriesIdx].lines.show);
 someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
 //console.log(someData[seriesIdx].lines.show);
 
 somePlotSuccess.setData(someData);
 somePlotSuccess.setupGrid();
 somePlotSuccess.draw();
}

options.legend.labelFormatter = function(label, series) {
   return '<a href="#" onClick="togglePlotSuccess(' + series.idx
     + '); return false;">' + label + '</a>';
  };
  somePlotSuccess = $.plot($('#CAGraph'), datasets, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.threshold.min.js"></script>

<div id = "choices_CAGraph">

</div>
<div id="CAGraph" style="width:650px;height:400px">

如果你点击图例你只会看到它show/hides只有第一个系列

Answer 1

您遇到的问题是因为阈值插件的工作方式。您可能一开始只向您的绘图添加 3 个数据系列，但阈值随后将这 3 个数据系列分成更多（在您的示例中，getData() 实际上 returns 9 数据系列第一次被调用）以便它可以显示不同颜色的线条等，对于特定（原始）系列。原始系列 idx“1”将不再是新系列 idx“1”（事实上，我认为新系列“1”和“2”都属于原始系列“0”，因为该系列已分为 3 个独立的系列段）。

事实上，情况变得更糟：因为您正在调用 getData()、修改它，然后用修改后的数据数组调用 setData()，数据系列的数量增加了每次都会调用 onClick 处理程序。

所以，解决方案很简单：不要费心保存从 $.plot() 返回的对象，也不要费心在其上调用 getData()/setData()，只需再次调用 $.plot()在您的 onClick 处理程序中划痕。

有一个额外的属性你必须添加到原始 datasets 数组中的 each 系列：

"lines": {
  "show": true
},

否则您将无法在 onClick 处理程序中将其 off/on。

然后你的处理程序变成：

togglePlotSuccess = function(seriesIdx) {
  datasets[seriesIdx].lines.show = !datasets[seriesIdx].lines.show;
  $.plot($('#CAGraph'), datasets, options);
};

带有阈值和曲线插件的 flot toggle 系列

flot toggle series with threshold and curved lines plugin

flot