0

尝试学习在项目中使用胜利图。鉴于下面的代码,它只显示 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>
        );
    }
}

结果: 结果图,没有 8 行

4

1 回答 1

0

您可以尝试为您的轴提供而不是设置tickCountprop。

要计算域愤怒,您可以通过Math.floor()y获取具有最低属性和路径的项目,以获得小于或等于数据的最大整数,并通过Math.ceil () 获取具有最大属性和路径的项目获得大于或等于数据的最小整数:yyy

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>
        );
    }
}

可以在这里看到一个工作示例

于 2018-12-04T13:50:59.610 回答