4

我制作了一个显示图表的应用程序。我正在使用react-native-chart-kit包来执行此操作。

我试图显示一个弹出视图,其中显示了选定/单击的值:

<LineChart
  data={{
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        data: [20, 50, 10, 80, 45, 66],
      },
    ],
  }}
  width={Dimensions.get('window').width} // from react-native
  height={300}
  yAxisInterval={1}
  chartConfig={{
    decimalPlaces: 0,
    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    style: {
      borderRadius: 16,
    },
    propsForDots: {
      r: '6',
      strokeWidth: '2',
      stroke: '#ffa726',
    },
  }}
  decorator={(value) => {
    console.log('decorator' + JSON.stringify(value));
    // return (
    //     <View style={{ position: 'absolute', backgroundColor: 'red', top: value.y, left: value.x, height: 100, width: 100, zIndex: 1000 }}></View>
    // )
  }}
  bezier
  style={{
    marginVertical: 8,
    borderRadius: 16,
  }}
  onDataPointClick={(data) => {
    return (
      <View
        style={{
          position: 'absolute',
          backgroundColor: 'red',
          top: data.y,
          left: data.x,
          height: 100,
          width: 100,
          zIndex: 1000,
        }}></View>
    );
  }}
/>

谁能告诉我我做错了什么或建议我可以用来实现相同行为的其他软件包?

4

0 回答 0