Как управлять метками меток оси X Victory

Я использую 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, чтобы отобразить тик для каждого месяца («январь», «февраль», «март» и т. д.)? Кроме того, я хотел бы, чтобы каждая полоса имела ширину 40 пикселей (barWidth=40), но когда я это делаю, все полосы просто объединяются - я также хотел бы контролировать поля/отступы между полосами. Как это решить?

Пример доступен в этой песочнице: https://codesandbox.io/s/victory-react-native-4t49q


reactjs victory-charts
person dhrm    schedule 11.09.2019    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете отображать метки в виде делений по оси X. Затем, чтобы контролировать поля/отступы, вы можете установить ширину контейнера немного шире, чтобы соответствовать более жирным полосам.

import React from "react";
import { render } from "react-dom";
import { VictoryChart, VictoryBar, VictoryAxis, VictoryContainer, VictoryLabel } from "victory";

class App extends React.Component {
  render() {

    let month = new Array(12);
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    return (
      <div style={{ width: 600 }}>
        <VictoryChart domainPadding={30}
            width={900}
            containerComponent={<VictoryContainer responsive={false}/>}>
          <VictoryAxis
            dependentAxis={true}
            style={{
              grid: { stroke: "grey" }
            }}
          />
          <VictoryAxis 
            tickFormat={(x) => ``}
          />
          <VictoryBar
            barWidth={50}
            padding={{ left: 20, right: 60 }}
            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 }
            ]}
            labels={( datum ) => `${month[datum.x.getMonth()]}`}
            labelComponent={<VictoryLabel y={250} verticalAnchor={"start"}/>}
          />
        </VictoryChart>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

В качестве песочницы: ссылка

person Renat    schedule 16.09.2019

arrow_upward
0
arrow_downward

Можешь попробовать. Добавлены комментарии, где необходимы изменения

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>
    );
  }
}
person Harish    schedule 23.09.2019