Question

我正在尝试使用Flot制作包含多个系列的折线图，然后使用CurvedLines plugin平滑线条。

我可以单独使用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);

如何让图表顺利绘制多个系列（并显示图例）？提前谢谢。

Answer 1

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

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

如何使用Flour制作带曲线的多系列折线图？

1 个答案: