如何在react-native-chart-kit中使用装饰器？

Question

我发现了react-native-chart-kit，我发现在LineChart中，我们可以使用一个名为: decorator的函数，但我没有找到任何示例；

​

​

文档的链接

如果someOne已经有这方面的经验，这可以帮助我

  componentDidMount() {
   this.GetData();
   }
  GetData = () => {
      const self = this;
      return fetch('http://192.168.1.3:80/graph.php')
      .then((response) => response.json())
      .then((responseJson) => {
        const dataClone = {...self.state.data}
        const values = responseJson.map(value => value.ChiffreAffaire);
        const label = responseJson.map(value => value.M500_NOM);
      dataClone.datasets[0].data = values;
      dataClone.labels= label;
        this.setState({
          isLoading: false,
          data: dataClone,
        });
      })
      .catch((error) =>{
        console.error(error);
      });
  }
<LineChart
            data={this.state.data}
            width={Dimensions.get("window").width*0.99}
            height={400}
            yAxisInterval={1}
            chartConfig={chartConfig}
            bezier
            spacing={0.8}
            spacingInner={0.8}
            verticalLabelRotation={90}
            withInnerLines={true}
            //renderDotContent={({x, y, index}) => <Text>{}</Text>}
            style={{
              marginVertical: 20,
              marginLeft:2,
              marginRight:2,
              borderRadius: 16,
              borderWidth: 0.5,
              borderColor: 'grey'
            }}
            />

这就是我手机屏幕上显示的内容(所以你可以看到我的x标签没有正确显示)，有什么想法吗？

​

​

Answer 1

我发现了这个很好的教程：

https://levelup.gitconnected.com/adding-tooltip-to-react-native-charts-67606c5d3182

您基本上应该获取点数据(从LineChart组件回调onDataPointClick属性)，并将点坐标和值传输到tooltip，一个SVG组件。