用可選系列繪制PIE圖表

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刷新/重新加載Flot

因此使用

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