0

我在将 VictoryAxis 安装到 VictoryChart 时遇到问题。轴似乎从我的 X 轴上的第二个值开始。

这就是它应该看起来的样子(第一个小节下 0,最后一个小节下 22 个)

图表的外观

但是,当我将标签添加为tickValuesortickFormat时,我得到了这个

图表的外观

这是我的代码

const dataX = ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22"];

<VictoryChart width={Metrics.width - Metrics.gridSize * 4}
  padding={{ left: 20, top: 10, right: 10, bottom: 30  }}
  height={height}
  containerComponent={<VictoryContainer responsive={false} />}
  domain={{ x: [0, dataX.length] }}
>
    <VictoryGroup offset={10}>
      {data.map((chartData, index) => (
        <VictoryBar
          cornerRadius={3}
          barWidth={10}
          data={chartData.data}
          key={index}
          y="value"
        />
      ))}
    </VictoryGroup>

    {/* X-AXIS */}
    <VictoryAxis tickValues={dataX} />
</VictoryChart>

欢迎任何帮助解决我的问题!

[编辑]

不向domainVictoryChart 提供 a 并将tickValues结果删除到此:

不带刻度值的图表

4

1 回答 1

0

我的错误是我的数据格式。这就像

[{"value": 1}, {"value": 1.1}...]

我必须将我的数据映射到这样的东西

[{"x": 1, "y": 1}, {"x": 2, "y": 1.1}...]

于 2021-02-19T10:13:48.333 回答