Графики Победы: Использование меток с гистограммами - PullRequest
Новая
       46

Графики Победы: Использование меток с гистограммами

0 голосов
/ 10 мая 2019

Я использую VictoryCharts для добавления диаграмм в мое приложение React.Я пытаюсь выполнить что-то вроде:

like This

Я пролистал документы и не смог найти способ добавить метки на одну гистограмму,

Вещи, которые я пробовал

  1. Вложенность <VictoryLabel> andunder `` `-> Оси отображаются, и в документах рекомендуется использовать VictoryGroup
  2. Вложенность <VictoryLabel> andunder `` `-> VictoryGroup не поддерживает VictoryLabel
  3. Попробовал сделать автономный <VictoryBar> & <VictoryLabel> и встраивание его в <svg> -> Невозможно увидеть содержимое диаграммы на странице

Это фрагмент, который у меня есть сейчас:

import Box from '@material-ui/core/Box';
import React from 'react';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryContainer, VictoryLabel, VictoryTheme } from 'victory';

const SampleChart = ({ stat=25, title = 'Sample' }) => (
  <Box ml={5}>
    <svg height={60} width={200}>
      <VictoryLabel text={title.toLocaleUpperCase()} textAnchor='start' verticalAnchor='end' />
      <VictoryBar
        barWidth={10}
        data={[{ y: [stat], x: [1] }]}
        domain={{ y: [0, 100], x: [0, 1] }}
        horizontal
        labels={d => d.y}
        labelComponent={
          <VictoryLabel verticalAnchor='end' textAnchor='start' />
        }
        standalone
        style={{ parent: { height: 'inherit' } }}
        theme={VictoryTheme.material}
      />
    </svg>
  </Box>
);
ReactDOM.render(<SampleChart />, document.querySelector("#app"))
<div id='app'></div>

1 Ответ

1 голос
/ 10 мая 2019

Вы можете использовать ось для этого эффекта следующим образом: 

const CHART_WIDTH = 800;
const val = 28
function BarChart() {
  return (
    <div style={{ width: CHART_WIDTH }}>
      <VictoryChart height={200} width={CHART_WIDTH}>
        <VictoryAxis 
          dependentAxis
          tickValues={[0,100]}
          offsetY={190}
          tickFormat={t => t===0 ? 'average age' : val}
          style={{axis: { stroke: 'none'}}}
        />
        <VictoryBar
          barWidth={10}
          data={[{ y: [45], x: [1] }]}
          domain={{ y: [0, 100], x: [0, 1] }}
          horizontal
        />
      </VictoryChart>
    </div>
  );
}

https://codepen.io/anon/pen/RmaxOd?editors=0110#0

Не совсем то, что вы хотели, но она выполняет свою работу, и вы можете отформатироватьотметьте метки или предоставьте пользовательские компоненты, чтобы они выглядели так, как вы хотите.

...