0

我尝试过使用 react-native-svg-charts、react-native-highcharts 但没有帮助。我无法绘制数据点、移动轴（根据时间）和标记轴。

     <YAxis
          data={data1}
          style={{ marginBottom: xAxisHeight }}
          contentInset={verticalContentInset}
          svg={axesSvg}
          numberOfTicks={ 5 }

      />
      <View style={{ flex: 1, marginLeft: 10 }}>
       <LineChart
          style={ { flex: 1 } }
           data={ data1 }
           yAccessor={({ item }) => item.value}
           xAccessor={({ item }) => item.date}
           contentInset={{ left: 10, right: 25 }}
           xScale={scale.scaleTime}
           numberOfTicks={10}
           svg={{
             stroke: "#F7941D",
             strokeWidth: 1.25
           }}

       >
       <Grid/>

       </LineChart>
       <XAxis
         data={data1}
         svg={{
             fill: 'black',
             fontSize: 8,
             fontWeight: 'bold',
             rotation: 20,
             originY: 30,
            y: 5,
         }}
         xAccessor={({ item }) => item.date}
         scale={scale.scaleTime}
         numberOfTicks={10}
         style={{ marginHorizontal: -15, height: 20 }}
         contentInset={{ left: 15, right: 25 }}
         formatLabel={(value) => dateFns.format(value, 'hh:mm:ss')}
       />
       </View>
   `

我的数据是这样的： 1: {value: 119.6932, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 2: {value: 119.9372, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 3: {value: 120.2093, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 4: {value: 122.9826, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)} 5: {value: 114.2904, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}

以上是使用 react-native-svg-charts 实现的，在这里我能够以某种方式根据实时时间移动 x 轴（时间），但它不正确。有没有好的格式建议？谢谢

4

0 回答 0