flot toggle series with threshold and curved lines

问题:

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

回答1:

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).

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.

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.

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

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

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);
};