Question

我正在使用Victory渲染数据集：

class App extends React.Component {
  render() {
    return (
      <div style={{ width: 600 }}>
        <VictoryChart domainPadding={30}>
          <VictoryAxis
            dependentAxis={true}
            style={{
              grid: { stroke: "grey" }
            }}
          />
          <VictoryAxis />
          <VictoryBar
            barWidth={20}
            style={{ data: { fill: "red" } }}
            data={[
              { x: new Date("2019-01-01"), y: 2 },
              { x: new Date("2019-02-01"), y: 3 },
              { x: new Date("2019-03-01"), y: 5 },
              { x: new Date("2019-04-01"), y: 4 },
              { x: new Date("2019-05-01"), y: 8 },
              { x: new Date("2019-06-01"), y: 2 },
              { x: new Date("2019-07-01"), y: 3 },
              { x: new Date("2019-08-01"), y: 5 },
              { x: new Date("2019-09-01"), y: 9 },
              { x: new Date("2019-10-01"), y: 3 },
              { x: new Date("2019-11-01"), y: 5 },
              { x: new Date("2019-12-01"), y: 6 }
            ]}
          />
        </VictoryChart>
      </div>
    );
  }
}

如何更改x轴以渲染每个月的刻度（“ jan”，“ feb”，“ mar”等）？此外，我希望每个条的宽度为40 px（barWidth = 40），但是当我这样做时，所有条都只是合并了-我也想控制条之间的边距/填充。应该如何解决？

此沙箱中提供了一个示例： https://codesandbox.io/s/victory-react-native-4t49q

Answer 1

您可以将标签显示为x轴刻度。然后，为了控制边距/边距，您可以将容器的宽度设置得更宽一些，以适应较粗的条形。

select *
from pg_timezone_names
where abbrev like '%GST%'
or name like '%GST%'

作为沙箱：link

Answer 2

您可以尝试。在需要更改的地方添加了评论

class App extends React.Component {
  render() {
    return (
      <div>
      <VictoryChart
          domainPadding={30}
          width={700} // Width should be more as we are updating barWidth
        >
         <VictoryAxis
            dependentAxis={true}
            style={{
              grid: { stroke: "grey" }
            }}
          />
          <VictoryAxis  tickFormat={x => ''} /> // remove existing labels
          <VictoryBar
            barWidth={40}
            style={{ data: { fill: "red" } }}
            labels={( datum ) => {  return `${datum.x.toLocaleString('default', { month: 'short' })}`}} // get labels as month name
            labelComponent={
              <VictoryLabel y={270} 
                verticalAnchor={"start"} 
                angle={90}
              />
          }
            data={[
              { x: new Date("2019-01-01"), y: 2 },
              { x: new Date("2019-02-01"), y: 3 },
              { x: new Date("2019-03-01"), y: 5 },
              { x: new Date("2019-04-01"), y: 4 },
              { x: new Date("2019-05-01"), y: 8 },
              { x: new Date("2019-06-01"), y: 2 },
              { x: new Date("2019-07-01"), y: 3 },
              { x: new Date("2019-08-01"), y: 5 },
              { x: new Date("2019-09-01"), y: 9 },
              { x: new Date("2019-10-01"), y: 3 },
              { x: new Date("2019-11-01"), y: 5 },
              { x: new Date("2019-12-01"), y: 6 }
            ]}
          />
        </VictoryChart>
      </div>
    );
  }
}

如何控制胜利x轴刻度标签

2 个答案: