0

我正在使用 react-native-svg-charts 库处理图表，看起来它非常灵活和酷，但我遇到了这个问题。我需要为 xAxis 建立 24 小时时间表，但不知道该怎么做。

所以我有一个看起来像这样的图表

简单的折线图

接下来是图表的代码：

<>
        <View style={{flex: 1}} {...panResponder.current.panHandlers}>
          <AreaChart
            animate
            style={{flex: 1}}
            data={glucoseValues}
            yMin={0}
            yMax={180}
            curve={shape.curveNatural}
            contentInset={{...verticalContentInset}}
            svg={{fill: 'url(#gradient)'}}>
            <CustomLine/>
            <Tooltip/>

          </AreaChart>
          <SafeArea/>
        </View>
        <YAxis
          style={{width: apx(44)}}
          data={[...Array(19).fill(1).map((el, i) => el + i * 10)]}
          contentInset={verticalContentInset}
          svg={{fontSize: apx(20), fill: '#617485'}}
        />

      <XAxis
        style={{
          alignSelf: 'stretch',
          width: apx(INIT_WIDTH),
          height: apx(40),
        }}
        data={[...Array(24).fill(1)]}
        formatLabel={(value, i) => {
          return i === 0 ? '00:00' :
            i % 4 === 0 ? moment().startOf('day').add(i, 'hours').format('HH:mm') :
              i === 23 ? '23:59' : '';
        }}
        contentInset={{
          left: 20,
          right: 20,
        }}
        svg={{
          fontSize: apx(20),
          fill: '#617485',
          alignmentBaseline: 'center',
          textAnchor: 'middle',
          y: apx(10),
        }}
      />
</>

如您所见，XAxis 有点显示时间线，但未应用。如果是这样，在图表之前和之后，我们应该会看到像这张图片一样的空白区域。 在此处输入图像描述

我的问题是下一个。如何为 xAxis 设置域，如上图所示？

对于图表，我使用 Y 值数组和 X 时间戳数组。也许我应该以某种方式指出 AreaChart 的 xMax、xMin 属性。有任何想法吗？

4

0 回答 0