Заставить верхнюю линию на оси графика победы - PullRequest
Новая
       9

Заставить верхнюю линию на оси графика победы

0 голосов
/ 04 декабря 2018

Попытка научиться использовать Графики Победы для проекта.Учитывая приведенный ниже код, он показывает только тиковые линии на 2,4 и 6. Данные доходят до 7,6, поэтому я хотел бы, чтобы также отображалась верхняя тиковая строка на 8.

Я могу установить доменразмер вручную, но диапазон может сильно отличаться (например, график квартальных результатов по сравнению с ежемесячным), и учитывая, что Победа может автоматически определять разумные линии оси, я не хочу это заново изобретать.Я поставил счетчик тиков на 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>
        );
    }
}

Результат: resulting graph, with no 8 line

1 Ответ

0 голосов
/ 04 декабря 2018

Вы можете попытаться предоставить домен для вашей оси вместо установки tickCount prop.

Чтобы рассчитать ярость домена, вы можете взять элемент с наименьшим свойством y и путь через Math.floor () , чтобы получить наибольшее целое число, меньшее или равное * 1009 ваших данных* а также возьмите элемент с самым большим 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>
        );
    }
}

Рабочий пример можно увидеть здесь

...