Flot을 사용하여 곡선이있는 다중 문서 선 그래프를 만들려면 어떻게해야합니까?

Question

Flot을 사용하여 여러 계열의 선 그래프를 만든 다음 CurvedLines plugin을 사용하여 선을 다듬습니다.

플롯을 사용하여 일련의 꺾은 선형 차트를 얻을 수 있습니다. CurvedLines 플러그인을 사용하여 하나의 부드러운 선형 차트를 만들 수도 있습니다. 하지만 몇 가지 이유 때문에 필자의 다중 시리즈 선 그래프를 부드럽게 만들 수는 없습니다. 내 CSS 또는 외부 JS 파일을 아무 문제가 없다는 것을 www.somanifamily.com/multiple/

나는 긍정적이다 : 여기

내가 일하고 있어요 그래프에 대한 링크입니다. 오류가

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

이 어떻게 그래프는 음모에 도착 않는 줄 것을

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

내가 의심 해요 : 여기

내 페이지에서 (약간 요약 된) 자바 스크립트입니다 여러 시리즈가 원활하게 (그리고 함께 범례를 표시)? 미리 감사드립니다.

Answer 1

귀하의 의문 사항은 맞습니다. 그 라인에서는 사실 일련의 배열 일 때 d1을 개별 시리즈로 취급합니다. 당신은 모든 시리즈에 적용되는 동일한 curvedLines 매개 변수를 원하는 것 때문에 귀하의 경우에는, 당신은 (당신은 이미 당신이 나머지를 추가해야 active: true이)가 options에 추가 할 수 있습니다 :

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