VictoryAxis 在错误的位置开始
VictoryAxis starts at the wrong position
我无法将我的 VictoryAxis 安装到我的 VictoryChart。
轴似乎从我的 X 轴上的第二个值开始。
它应该是这样的(第一个小节下有 0 个,最后一个小节下有 22 个)
然而,当我将标签添加为 tickValues
或 tickFormat
时,我得到了这个
这是我的代码
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>
欢迎任何帮助解决我的问题!
[编辑]
未向 VictoryChart 提供 domain
并删除 tickValues
结果:
我这里的错误是我的数据格式。这有点像
[{"value": 1}, {"value": 1.1}...]
我不得不将我的数据映射到这样的东西
[{"x": 1, "y": 1}, {"x": 2, "y": 1.1}...]
我无法将我的 VictoryAxis 安装到我的 VictoryChart。 轴似乎从我的 X 轴上的第二个值开始。
它应该是这样的(第一个小节下有 0 个,最后一个小节下有 22 个)
然而,当我将标签添加为 tickValues
或 tickFormat
时,我得到了这个
这是我的代码
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>
欢迎任何帮助解决我的问题!
[编辑]
未向 VictoryChart 提供 domain
并删除 tickValues
结果:
我这里的错误是我的数据格式。这有点像
[{"value": 1}, {"value": 1.1}...]
我不得不将我的数据映射到这样的东西
[{"x": 1, "y": 1}, {"x": 2, "y": 1.1}...]