使用jQueryFlot曲線圖

我目前有一個很漂亮的簡單線條圖的flot圖表。試圖使用CurvedLines插件來平滑曲線，但點不完整。使用jQueryFlot曲線圖

我的代碼是在這裏：

var d = [[2010, ], [2011, 0], [2012, 1000], [2013, 835000], [2014, 5100000], [2015, 15300000], [2016, 33400000], [2017, ]]; 


    var data1 = [{data: d, color: "#0086e5", points: { symbol: "circle", fillColor: "#ffffff", radius: 5 }, lines: {show: true}, points: {show: true}, curvedLines: {apply: true, monotonicFit: true}}]; 

    var options = { 
      series: { 
       curvedLines: {active: true}      
      } 
      }; 

      /*series: { 
      lines: { show: true }, 
      points: { show: true }, 
      curvedLines: {active: true}   
     },*/ 

    $.plot("#homechart",data1, {    

     xaxis: { 
      tickColor: '#def2ff', 
      tickDecimals: 0 

     }, 

     yaxis: { 
      tickLength: 0, 
      show: false 
     }, 
     grid: { 
      backgroundColor: { colors: [ "#effaff", "#d7f3ff" ] }, 
      borderWidth: 0 
     } 

     }); 

     var ticklabel = $('.tickLabel'); 
     ticklabel.each(function(index, domElement) { 
     var $element = $(domElement); 

     if ($element.text() === "2010") { 
      $element.hide(); 
     } 

     if ($element.text() === "2017") { 
      $element.hide(); 
     } 
}, options);

圖表生成，但不圓滑曲線。

來源

2016-06-07 plumwd

的情節呼叫的選項缺少

series: { 
    curvedLines: {active: true}      
}

（和最小/對x軸最大值）。

添加後，它的作品：https://jsfiddle.net/khwc415t/

來源

2016-06-07 14:11:12 Raidri

好吧，我明白了。爲什麼不通過選項應用它？還有一個問題。如何只顯示我的有效數據點？我不希望每個點都繪製在圖上。 – plumwd

您只能在'ticklabel.each（...）'調用中使用您的'選項'對象，而不是劇情調用。 – Raidri

要僅顯示原始點，請複製您的data1對象，並用曲線繪製一個只有點和一個副本的副本：https：//jsfiddle.net/khwc415t/1/ – Raidri

使用jQueryFlot曲線圖

回答

相關問題