Флота ПИРО-диаграмма с опциональной серией

Question

Im с помощью библиотеки Flot в сочетании с круговыми диаграммами.

Теперь я получил свою диаграмму, но мне также нужно иметь возможность выбирать, какая серия будет видна. Я видел несколько примеров, используя флажки и регулярные диаграммы (строка, строка). Но я не видел ни одного примера, использующего круговые диаграммы.

Так вот код, который я использовал, чтобы заставить его работать с круговыми диаграммами, но безуспешно.

function setKPI(data, id) 
{ 

var i = 0; 
$.each(data, function(key, val) { 
    val.color = i; 
    ++i; 
}); 

// insert checkboxes 
var choiceContainer = $("#choices"); 
$.each(data, function(key, val) 
{ 
    choiceContainer.append("<br/><input type='checkbox' name='" + key + 
     "' checked='checked' id='id" + key + "'></input>" + 
     "<label for='id" + key + "'>" 
     + val.label + "</label>"); 
}); 

choiceContainer.find("input").click(plotAccordingToChoices); 

function plotAccordingToChoices() 
{ 
    var data1 = []; 
    choiceContainer.find("input:checked").each(function() 
    { 
     var key = $(this).attr("name"); 
     if (key && data[key]) { 
      data1.push(data[key]); 
     } 
    }); 
    if (data1.length > 0) 
    { 
     $.plot(id, data1, 
     { 
      series: 
      { 
       pie: 
       { 
        show: true, 
        innerRadius: 0.4, 
       }, 
      },   
      legend: {show: false} 
     }); 
    } 
} 
plotAccordingToChoices(); 
} 
var datasets = new Array(); 
datasets[1] = [ 
    {label: "New", data: 51}, 
    {label: "Plan", data: 20}, 
    {label: "Comm", data: 25}, 
    {label: "Done", data: 100}, 
    {label: "Overdue", data: 20}, 
]; 
setKPI(datasets[1],'#kpi-2'); 

Этот код, кажется, работает в первый раз, это запустить, но всякий раз, когда есть флажок неотмеченным он рисует неверную схему линии.

HTML:

<div id="kpi-2" style="width:100%;height:220px;margin:0 auto;"></div> 
<p id="choices" style="float:right; width:135px;"></p> 

Answer 1

Найдено ответ здесь: Refresh/Reload Flot In Javascript

, таким образом, используя

plot.setData(newData); 
plot.draw(); 

полный пример ниже

function setKPI(data, id, check, options) 
{ 
setColors(data); 

createFlot(data, id); 

var plot = $.plot($(id),data,options); 

if(check) 
{ 
    insertCheckboxes(data); 
    var choiceContainer = $("#choices"); 
    choiceContainer.find("input").on('click', function(){ 
     resetKPI(data, plot); 
    }); 
} 
} 

function resetKPI(data, plot) 
{ 
var choiceContainer = $("#choices"); 

var newData = []; 
choiceContainer.find("input:checked").each(function() 
{ 
    var key = $(this).attr("name"); 
    if (key && data[key]) { 
     newData.push(data[key]); 
    } 
}); 
plot.setData(newData); 
plot.draw(); 
} 

function createFlot(data, id, options) 
{ 
$.plot(id, data, options); 
} 

function setColors(data) 
{ 
var i = 0; 
$.each(data, function(key, val) { 
    val.color = i; 
    ++i; 
}); 
} 

function insertCheckboxes(data) 
{ 
var choiceContainer = $("#choices"); 
$.each(data, function(key, val) 
{ 
choiceContainer.append("<br/><input type='checkbox' name='" + key + 
    "' checked='checked' id='id" + key + "'></input>" + 
    "<label for='id" + key + "'>" 
    + val.label + "</label>"); 
}); 
} 

используя следующие данные

datasets[1] = [ 
    {label: "New", data: 51}, 
    {label: "Plan", data: 20}, 
    {label: "Comm", data: 25}, 
    {label: "Done", data: 100}, 
    {label: "Overdue", data: 20}, 
]; 

вызова функции

setKPI(datasets[1],'#kpi-2', true, { 
    series: 
    { 
     pie: 
     { 
      show: true, 
      innerRadius: 0.4, 
     }, 
    },   
    legend: {show: false} 
});