海軍報餅圖切換系列不工作

Question

我已經應用同樣的原理在此js fiddle但餅圖它不工作

var options_pie = { 
 
\t \t series : { 
 
\t \t \t pie:{ 
 
\t \t \t \t show: true 
 
\t \t \t } 
 
\t \t }, 
 
\t \t grid : { 
 
\t \t \t clickable : true, 
 
\t \t \t hoverable : true 
 
\t \t }, 
 
\t \t legend: { 
 
\t   labelFormatter: function(label, series){ 
 
\t   \t //console.log(series); 
 
\t   return '<a href="#" onClick="togglePlotPie(\''+label+'\'); return false;">'+label+'</a>'; 
 
\t   }, 
 
\t   noColumns: 3, 
 
\t   
 
\t  } 
 
}; 
 

 

 

 
togglePlotPie = function(seriesIdx) 
 
{ 
 
    var someData = somePlotIncidents.getData(); 
 
    var someDataActive; 
 
    for(i=0;i < someData.length ;i++){ 
 
\t if(someData[i].label == seriesIdx) 
 
\t \t 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) 
 
\t someData[someDataActive].stack = 0; 
 
    else if(someData[someDataActive].stack == 0) 
 
\t 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>

Answer 1

它不工作的方式進行餡餅發現圖表。我對數據集進行了一些更改以使其正常工作。這裏是fiddle。 我爲每個派添加了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 
}];