带有可选系列的 Flot PIE 图表

Question

我将库 Flot 与饼图结合使用。

现在我的图表可以正常工作了，但我还需要能够 select 哪些系列是可见的。我见过几个使用复选框和常规图表（折线图、条形图）的示例。但是我还没有看到一个使用饼图的例子。

所以这是我用来使其与饼图一起使用但没有成功的代码。

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

带有可选系列的 Flot PIE 图表

Flot PIE chart with optional series

javascript

jquery

charts

flot