flot曲線從第一點開始

Question

我正在使用flotjs插件來創建圖表。 在我的例子中，第一條曲線以（0,0）開頭但是我需要我的行以（20,20）開頭我的意思是從第一個點開始而不是（0,0）...看看我的第二個例子從第一個點開始而不是從（0,0）位置開始。我也需要在曲線圖上使用相同的圖案。 我怎樣才能做到這一點？

 //data var d1 = [[null,],[20, 20], [25, 50], [27.5, 35], [30, 20], [35, 20]]; //flot options var options = { series: { curvedLines: {active: true} } }; //plotting $.plot($("#flotContainer"),[ { data: d1, color: '#2b8cbe', lines: {show: true, lineWidth: 3}, //choose tension from [0,1] to see overshooting effects (0.5 is default) curvedLines: {apply: true, tension: 1} }, { data: d1, color: '#f03b20', points: {show: true} } ], options); $.plot($("#flotContainer2"),[ { data: d1, color: '#2b8cbe', lines: {show: true, lineWidth: 3}, //monotonicFit enforces monotonicity curvedLines: {apply: true, monotonicFit: true} }, { data: d1, color: '#f03b20', points: {show: true} } ], options); 

 .chart-style { width: 400px; height: 240px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script> <script src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script> <h4>CurvedLines: with standard settings (shows effects of tension parameter)</h4> <div id="flotContainer" class="chart-style"></div> <h4>CurvedLines: with monotonicFit (no overshooting/wiggles) </h4> <div id="flotContainer2" class="chart-style"></div> 

但它在折線圖上工作正常

 var data = [ { label: 'foo', color: 'red', data: [[0,null],[1, 300], [2, 300], [3, 300], [4, 300], [5, 300]]}, { label: 'bar', color: 'blue', data: [[1, 800], [2, 600], [3, 400], [4, 200], [5, 0]]}, { label: 'baz', olor: 'yellow', data: [[1, 100], [2, 200], [3, 300], [4, 400], [5, 500]]}, { label: 'dart', color: 'green', data: [[1, 500], [2, 350], [3, 400], [4, 700], [5, 50]]} ]; var flot = $.plot($("#placeholder"), data, { series: { lines: { show: true }, points:{ show:true } }, legend: { noColumns: 4, container: $("#chartLegend") } }); 

 #chartLegend .legendLabel { padding-right:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> <script src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script> <div id="placeholder" style="width:600px;height:300px;"></div> <div id="chartLegend"></div> 

Answer 1

curvedLines插件使用您的第一個數據點[null,]並將其轉換為[0,0] 。 刪除該數據點，曲線從[20,20]開始。

 //data var d1 = [ [20, 20], [25, 50], [27.5, 35], [30, 20], [35, 20] ]; //flot options var options = { series: { curvedLines: { active: true } } }; //plotting $.plot($("#flotContainer"), [{ data: d1, color: '#2b8cbe', lines: { show: true, lineWidth: 3 }, //choose tension from [0,1] to see overshooting effects (0.5 is default) curvedLines: { apply: true, tension: 1 } }, { data: d1, color: '#f03b20', points: { show: true } }], options); $.plot($("#flotContainer2"), [{ data: d1, color: '#2b8cbe', lines: { show: true, lineWidth: 3 }, //monotonicFit enforces monotonicity curvedLines: { apply: true, monotonicFit: true } }, { data: d1, color: '#f03b20', points: { show: true } }], options); 

 .chart-style { width: 400px; height: 240px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script> <script src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script> <h4>CurvedLines: with standard settings (shows effects of tension parameter)</h4> <div id="flotContainer" class="chart-style"></div> <h4>CurvedLines: with monotonicFit (no overshooting/wiggles) </h4> <div id="flotContainer2" class="chart-style"></div>