Question

尝试学习在项目中使用胜利图表。给定下面的代码，它仅在2,4和6处显示刻度线。数据上升到7.6，所以我也希望出现顶部的8号刻度线。

我可以手动设置域的大小，但是范围可能会大不相同（例如，季度结果与每月结果的关系图），并且由于Victory可以自动确定合理的轴线，所以我不想重新发明它。我输入的滴答计数为4，但只有3仍然显示。

import React from 'react';
import { VictoryChart, VictoryLine, VictoryContainer, VictoryTheme, VictoryAxis } from "victory";

const fixeddata = [
    { x: 0, y: 0 },
    { x: 1, y: 3.2 },
    { x: 2, y: 4.9 },
    { x: 3, y: 5.3 },
    { x: 4, y: 6 },
    { x: 5, y: 7.6 }
];

export default class ExampleChart extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: fixeddata,
        };
    }

    render() {
        return (
            <VictoryChart width={600} height={400}
                containerComponent={<VictoryContainer />}>
                <VictoryLine data={this.state.data} />
                <VictoryAxis dependentAxis tickCount={4} style={
                    { grid : { stroke: "grey"}}
                } />
            </VictoryChart>
        );
    }
}

结果：

Answer 1

您可以尝试向轴提供一个domain而不是设置tickCount prop。

要计算域范围，您可以采用属性y最低的项，并通过Math.floor()路径以获取小于或等于数据y的最大整数，并采用具有最大y属性并通过Math.ceil()的路径以获取大于或等于数据的y的最小整数：

import React from 'react';
import { VictoryChart, VictoryLine, VictoryContainer, VictoryTheme, VictoryAxis } from "victory";

const fixeddata = [
    { x: 0, y: 0 },
    { x: 1, y: 3.2 },
    { x: 2, y: 4.9 },
    { x: 3, y: 5.3 },
    { x: 4, y: 6 },
    { x: 5, y: 7.6 }
];

export default class ExampleChart extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: fixeddata,
        };
    }

    getAxisDomain = () => {
      const data = this.state.data.map(d => d.y);
      return [
        Math.floor(Math.min(...data)),
        Math.ceil(Math.max(...data)),
      ];
    }

    render() {
        return (
            <VictoryChart width={600} height={400}
                containerComponent={<VictoryContainer />}>
                <VictoryLine data={this.state.data} />
                <VictoryAxis 
                  dependentAxis 
                  domain={this.getAxisDomain()}
                  style={
                    { grid : { stroke: "grey"}}
                  } 
                />
            </VictoryChart>
        );
    }
}

可以看到一个有效的示例here

在胜利图表轴上强制顶线

1 个答案: