浮动饼图切换系列不起作用

flot pie chart toggle series not working

本文关键字：系列 不起作用      更新时间：2023-09-26

我已经应用了与这个js fiddle上相同的主体，但对于饼图，它不起的作用

var options_pie = {
		series : {
			pie:{
				show: true
			}
		},
		grid : {
			clickable : true,
			hoverable : true
		},
		legend: {
	        labelFormatter: function(label, series){
	        	//console.log(series);
	          return '<a href="#" onClick="togglePlotPie('''+label+'''); return false;">'+label+'</a>';
	        },
	        noColumns: 3,
	        
	    }
};
togglePlotPie = function(seriesIdx)
{
  var someData = somePlotIncidents.getData();
  var someDataActive;
  for(i=0;i < someData.length ;i++){
	  if(someData[i].label == seriesIdx)
		  someDataActive = i;
  }
  console.log(someData);
  console.log(someData[someDataActive].pie.show);
  someData[someDataActive].pie.show = !someData[someDataActive].pie.show;
  console.log(someData[someDataActive].pie.show);
 /* if(someData[someDataActive].stack == 1)
	  someData[someDataActive].stack = 0;
  else if(someData[someDataActive].stack == 0)
	  someData[someDataActive].stack = 1;
  *///console.log(someData[seriesIdx].bars);
  console.log(someData);
  somePlotIncidents.setData(someData);
  somePlotIncidents.setupGrid();
  somePlotIncidents.draw();
}
var datasets = [{label:"P1",data:167,color:0,idx:0},{label:"P2",data:647,color:1,idx:1},{label:"P3",data:766,color:2,idx:2}];
somePlotIncidents = $.plot($("#network-graph"), datasets, options_pie);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.js"></script>
<div id="network-graph" style="width:600px;height:400px"></div>

它对饼图不起作用。我对数据集做了一些更改以使其正常工作。这是小提琴。我为每个馅饼增加了2个属性。

var datasets = [{
  label: "P1",
  data: 167,    // this value is updated along with show 
  color: 0,
  idx: 0,
  show: true,
  oldData: 167   // this value is copied back to data on toggle
}, {
  label: "P2",
  data: 647,
  color: 1,
  idx: 1,
  show: true,
  oldData: 647
}, {
  label: "P3",
  data: 766,
  color: 2,
  idx: 2,
  show: true,
  oldData: 766
}];
相关文章：