2

@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 模拟器上看到的所有内容。

iphone模拟器

4

1 回答 1

1

改变:

常量点 = monotoneCubicInterpolation(data)(40);

至:

常量点 = monotoneCubicInterpolation({ 数据,范围:40 })

于 2021-07-01T09:54:30.630 回答