绘制曲线/ Spline插件，它与FillBetween插件一起使用？ [英] Flot curved lines/Spline plugin which works with FillBetween plugin?

问题描述

Flot FillBetween插件可以很好地与折线图配合使用。但是我需要平滑线条并使它们更加弯曲。我见过，它对我有用。
Smooth.js重新获取数据数组并返回一个函数。要获得平滑点，请将函数应用于0和数组长度之间的任何值。我们的想法是获得比原始数据集更多的点。

例如，要平滑名为test的值数组：

  //获取平滑函数
 
 var s =平滑（测试，{
方法：Smooth.METHOD_CUBIC，
}） ; 
 
 //获得平滑数据
 //在原始数据集中每个点要求10个平滑点
 test_smoothed = []; 
 for（var i = 0; i< = test.length; i = i + .1）{
 test_smoothed.push（s（i））; 
} 
  

我做了一个 JSFiddle 。
您可以使用此插件并将平滑后的数据传递给flot，然后使用FillBetween。

The Flot FillBetween plugin works nicely with line charts. However I need to smooth out the lines and make them more curvy. I have seen the CurvedLined plugin and the Spline plugin but both do not work properly with the fillbetween plugin.

Is there any way to use a two curved line/Spline series and fill the area between them? Something like the image below. Also fills any enclosed area between the two series any time when one crosses the other.

解决方案

I am unfamiliar with the FillBetween plug-in. I am going to focus on aswering the smoothing part. I had a similar problem where those smoothing options did not work for me either. I used an external plug-in to make the smoothing. It's name is smooth.js and it worked for me. Smooth.js recives the data array and returns a function. To get a "smoothed point", apply the function to any value between 0 and the length of the array. The idea is to obtain more points than the original dataset.

For example, to smooth an array of values named test:

//obtaining smoothing function

var s = Smooth(test, {
    method: Smooth.METHOD_CUBIC,
});

//obtaining smoothed data
//asking for 10 "smoothed points" per each point in the original dataset
test_smoothed = [];
for (var i = 0; i <= test.length; i = i + .1) {
    test_smoothed.push(s(i));
}

I made a JSFiddle with this example. You can use this plug-in and pass the smoothed data to flot and then use the FillBetween.

这篇关于绘制曲线/ Spline插件，它与FillBetween插件一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！