0

Flotを使用して複数の系列を持つ折れ線グラフを作成し、CurvedLines プラグインを使用して線を滑らかにしようとしています。

ギザギザの線を取得するために flot のみを使用して、複数系列の折れ線グラフを取得できます。CurvedLines プラグインを使用して、1 つの滑らかな折れ線グラフを作成することもできます。しかし、何らかの理由で、複数系列の折れ線グラフを滑らかにすることができません。

ここに私が取り組んでいるグラフへのリンクがあります: 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では、実際にはシリーズの配列である場合、個々のシリーズとして扱っています。あなたの場合、すべてのシリーズに同じcurveLinesパラメーターを適用したいように見えるので、それらをに追加するだけ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 に答える