Javascript 带有可选系列的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');

函数setKPI（数据，id）
{
var i=0；
$。每个（数据、函数（键、值）{
val.color=i；
++一,；
});
//插入复选框
var choiceContainer=$（“#选项”）；
$。每个（数据、函数（键、值）
{
choiceContainer.append（“
”+
""
+val.label+“”）；
});
choiceContainer.find（“input”）。单击（根据选项绘制）；
功能图根据目录（）绘制
{
VarData1=[]；
choiceContainer.find（“输入：选中”）。每个（函数（）
{
var key=$（this.attr（“name”）；
if（键和数据[键]）{
数据1.推送（数据[键]）；
}
});
如果（数据1.length>0）
{
$.plot（id，数据1，
{
系列：
{
馅饼：
{
秀：没错，
内半径：0.4，
},
},        
图例：{show:false}
});
}
}
绘图依据目录（）；
}
var数据集=新数组（）；
数据集[1]=[
{标签：“新”，数据：51}，
{标签：“计划”，数据：20}，
{标签：“通信”，数据：25}，
{标签：“完成”，数据：100}，
{标签：“逾期”，数据：20}，
];
setKPI（数据集[1]，“#kpi-2”）；

这段代码在第一次运行时似乎是有效的，但每当有一个复选框未选中时，它就会绘制一个无效的折线图

HTML:

在这里找到了答案：

因此使用

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

调用函数

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

在这里找到了答案：

因此使用

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

调用函数

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