Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

所以，解决方案很简单：不要在$.plot()保存退回的对象，也不要在其上调用getData()/setData()，但只需从头开始再次调用$.plot()你的onClick处理程序。

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

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

否则您将无法在onClick处理程序中关闭/打开它。

然后您的处理程序变为：

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

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

1 个答案: