带阈值和曲线插件的浮点切换系列 [英] flot toggle series with threshold and curved lines plugin

问题描述

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">

如果点击图例，您只会看到它仅显示/隐藏第一个系列

If you click on the legend you will see it only show/hides the 1st series only

推荐答案

您看到的问题是由于阈值插件的工作方式而引起的.您可能在开始时仅将3个数据序列添加到绘图中，但是阈值随后将这3个数据序列分解为更多数据(在您的示例中，getData()实际上首先返回9个数据序列时间)，以便它可以显示特定(原始)系列的不同颜色的线条等.原始系列idx"1"将不再是新系列idx"1"(事实上，我认为新的"1"和"2"都属于原始系列"0"，因为该系列已分为3个单独的部分段).

The issue you're seeing is because of how the threshold plug-in works. You may only be adding 3 data series to your plot at the start, but threshold is then breaking apart those 3 data series into many more (in your example, getData() actually returns 9 data series the first time it's called) so that it can display the different colored lines, etc, for a particular (original) series. The original series idx "1" will no longer be the new series idx "1" (in fact I think both the new "1" and "2" belong to the original series "0" since that series has been split into 3 separate segments).

实际上，情况变得更糟:由于您正在调用getData()，对其进行修改，然后使用已修改的数据数组调用setData()，因此数据序列的数量每一次增加， onClick处理程序被调用.

In fact, it gets worse: since you are calling getData(), modifying it, and then calling setData() with the modified data array, the number of data series increases every single time the onClick handler is called.

因此，解决方案很简单:不必费心从$.plot()保存返回的对象，也不必费心在其上调用getData()/setData()，而只需在onClick处理程序中从头开始再次调用$.plot()即可.

So, the solution is simple: don't bother saving the returned object from $.plot() and don't bother calling getData()/setData() on it, but just call $.plot() again from scratch in your onClick handler.

您必须 在原始datasets数组中的每个系列中添加一个额外的属性:

There is an extra property you must add to each series in the original datasets array:

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

否则，您将无法在onClick处理程序中将其关闭/打开.

otherwise you won't be able to turn it off/on in your onClick handler.

然后您的处理程序将变为:

Then your handler becomes:

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

这篇关于带阈值和曲线插件的浮点切换系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！