0

我试图让这个折线图正确缩放,但我无法让 YAxis 与 LineChart 上的刻度对齐。我花了几天时间研究这个,我能找到的唯一信息是我需要确保 numberOfTicks 道具在 YAxis 组件和 LineChart 组件之间对齐。它是从 var 接收的,所以它的值绝对相同。如果您需要更多信息,我会尽我所能通过更新这篇文章将其提供给您。

无论传递什么值,都在折线图上呈现 10 个刻度,yAxis 正确呈现

更新:5 滴答及以下会改变滴答的数量,但任何高于 10 的滴答声都不会改变

这显示了黑色的刻度以及 Y 轴

在此处输入图像描述

笔记:

  • 使用 Var 保存 numOfTicks

  • 使用世博会

包裹:

  • 反应原生 svg 图表

代码:

      <YAxis
        data={yIndex}
        contentInset={{ top: 10, bottom: 30 }}
        svg={{
          fill: "white",
          fontSize: 10,
        }}
        formatLabel={(value) => `$${value}K-`}
        numberOfTicks={numYIndex}
      />
      <View style={{ width: "90%" }}>
        <LineChart
          style={{
            flex: 1,
            borderWidth: 1,
            borderColor: "white",
            borderTopWidth: 0,
            borderRightWidth: 0
          }}
          data={this.state.data}
          contentInset={{ top: 10, bottom: 30 }}
          numberOfTicks={numYIndex}
          gridMin={0}
        >
          <Grid />
          {/* {this.state.data.map((dataPoint, index) => {
            return <Tooltip index={index} />;
          })} */}
        </LineChart>
        <XAxis
            style={{
            width: "100%",
            borderTopWidth: 1,
            borderColor: "white",
          }}
          data={this.state.keys}
          formatLabel={(value, index) => value}
          contentInset={{ left: 10, right: 10 }}
          svg={{ fontSize: 10, fill: "white" }}
        />
      </View>
4

0 回答 0