带有可选系列的Flot饼图

Question

我使用库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

在这里找到答案：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}
});