我有超过 12 个 x 和 y 值的数据,当我得到 13 个值时,它将未渲染。
输出页面 1 看起来像
最后,数据未渲染,
我有超过 12 个 x 和 y 值的数据,当我得到 13 个值时,它将未渲染。
输出页面 1 看起来像
最后,数据未渲染,
无论如何我解决了这个问题以备将来参考我会写正确的答案,我只需要重新检查胜利原生文档
代码看起来像这样
<VictoryChart
width={1000}
theme={Theme}
labelComponent={<VictoryTooltip renderInPortal={false} />}
domainPadding={{ x: 25 }}
domainPadding={25}>
{/* Horizontal */}
<VictoryAxis
responsive={false}
style={{
ticks: {
// padding: 12,
},
tickLabels: {
fontSize: 13,
},
}}
/>
{/* Vertical */}
<VictoryAxis
dependentAxis
/>
<VictoryBar
style={{
ticks: {
// padding: 12,
},
tickLabels: {
fontSize: 13,
},
}}
// labelComponent={
// <VictoryTooltip
// flyoutStyle={{ stroke: "tomato", strokeWidth: 2 }}
// />}
categories={{
x: [
"10-06",
"10-07",
"10-08",
"10-09",
"10-12",
"10-13",
"10-14",
"10-15",
"10-16",
"10-19",
"10-20",
"10-21"
]
}}
data={[
{
"x": 1,
"y": 13
},
{
"x": 2,
"y": 12
},
{
"x": 3,
"y": 13
},
{
"x": 4,
"y": 12
},
{
"x": 5,
"y": 34
},
{
"x": 6,
"y": 12
},
{
"x": 7,
"y": 12
},
{
"x": 8,
"y": 14
},
{
"x": 9,
"y": 8
},
{
"x": 10,
"y": 39
},
{
"x": 11,
"y": 14
},
{
"x": 12,
"y": 14
}
]}
style={{
data: { fill: colors.PRIMARY_COLOR_GPA, width: 30 },
parent: { border: '1px solid #ccc' },
}}
/>