Rainbow-me React Native 图表未显示路径

问题描述

我正在使用 @rainbow-me/animated-charts 制作简单的图表，但似乎缺少线条路径。

我从他们的 NPM github 复制了下面的代码，但它只显示一个黑框（我假设它只是图表的背景）但缺少主线路径。有什么帮助吗？

export const data = [
  {x: 1453075200,y: 1.47},{x: 1453161600,y: 1.37},{x: 1453248000,y: 1.53},{x: 1453334400,y: 1.54},{x: 1453420800,y: 1.52},{x: 1453507200,y: 2.03},{x: 1453593600,y: 2.1},{x: 1453680000,y: 2.5},{x: 1453766400,y: 2.3},{x: 1453852800,y: 2.42},{x: 1453939200,y: 2.55},{x: 1454025600,y: 2.41},{x: 1454112000,y: 2.43},{x: 1454198400,y: 2.2},];
const {width: SIZE} = Dimensions.get('window');
const points = monotoneCubicInterpolation(data)(40);

const App = () => (
  <View style={{backgroundColor: 'black'}}>
    <ChartPathProvider data={{points: points,smoothingStrategy: 'bezier'}}>
      <ChartPath height={SIZE / 2} stroke="yellow" width={SIZE} />
      <ChartDot style={{backgroundColor: 'blue'}} />
    </ChartPathProvider>
  </View>
);

这就是我在 iphone 模拟器上看到的全部内容。

解决方法

变化：

const 点 = monotoneCubicInterpolation(data)(40);

致：

const points = monotoneCubicInterpolation({ data,range: 40 })