0

我正在尝试使用Flot制作具有多个系列的折线图，然后使用CurvedLines 插件平滑线条。

我可以单独使用 flot 来获得我的多个系列折线图来获得锯齿线。我还可以使用 CurvedLines 插件制作单个平滑折线图。但由于某种原因，我无法使我的多个系列折线图平滑。

这是我正在处理的图表的链接：www.somanifamily.com/multiple/

我很肯定我的 CSS 或外部 JS 文件没有问题。

这是我页面中的（略微删节的）Javascript：

$(function() {
var datasets = {
"oak": {
    label: "Oak (Querus)",
    data: [[10, 30], [20, 0], [30, 23], [40, 54], [50, 45], [60, 2], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"elm": {
    label: "Elm (Ulmus)",
    data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"weeds": {
    label: "Total Weeds",
    data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
},
"grass": {
    label: "Total Grass",
    data: [[10, 0], [20, 0], [30, 0], [40, 45], [50, 23], [60, 0], [70, 0], [80, 0], [90, 0], [100, 0], [110, 0], [120, 0]]
}
};

// hard-code color indices to prevent them from shifting as
// pollens are turned on/off

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

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

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

function plotAccordingToChoices() {
    var d1 = [];
    choiceContainer.find("input:checked").each(function () {
        var key = $(this).attr("name");
        if (key && datasets[key]) {
            d1.push(datasets[key]);
        }
    });
    if (d1.length > 0) {
        // set options
        var options = {
            series: {
                curvedLines: {
                active: true
                }
            },
            yaxis: {
                min: 0
            },
            xaxis: {
                tickDecimals: 0,
                ticks: [[10,'Jan.'],[20,'Feb.'],[30,'March'],[40,'April'],[50,'May'],[60,'June'],
                [70,'July'],[80,'Aug.'],[90,'Sep.'],[100,'Oct.'],[110,'Nov.'],[120,'Dec.']]
            }
        };

        // plot
        $.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);
    }
}

plotAccordingToChoices();
});

我怀疑错误与线路有关

$.plot("#placeholder", [{data: d1, lines: { show: true }, curvedLines: {apply:true, fit: true, fitPointDist: 0.000001}}], options);

如何让图表平滑地绘制多个系列（并显示图例）？提前致谢。

4

1 回答 1

2

你的怀疑是正确的。在该行中，您将d1其视为一个单独的系列，而实际上它是一系列系列。在您的情况下，由于您似乎希望将相同的曲线参数应用于所有系列，您可以将它们添加到options（您已经拥有active: true，您需要添加其余的）：

var options = {
    series: {
        curvedLines: {
            active: true
            apply: true,
            fit: true,
            fitPointDist: 0.000001
        }
    },
etc...

如果您希望每个系列有不同的参数，您可以在其中添加它们。

var datasets = {
"oak": {
    label: "Oak (Querus)",
    data: [[10, 30], [20, 0], [30, 23], [90, 0], [100, 0], [110, 0], [120, 0]]
    curvedLines:  {
            apply: true,
            fit: true,
            fitPointDist: 0.000001
        }
},
etc...

那么情节线就是：

$.plot("#placeholder", d1, options);
于 2013-08-12T13:53:38.773 回答