Диаграмма Победы связана с расстоянием между осью и значениями tickValues - PullRequest
Новая
       14

Диаграмма Победы связана с расстоянием между осью и значениями tickValues

0 голосов
/ 14 мая 2018

Это тип диаграммы, которую я хочу в моем проекте stacked column chart

Диаграмма взята из учебника Диаграмма победы , код которого можно найти здесь

Теперь мне нужна диаграмма с аналогичной структурой, поэтому я попытался адаптировать пример кода для представления данных, которые я хочу, но вместо этого я получаю следующее:

enter image description here

Как видите, пробелы между значениями тиков по оси X полностью перемешаны и код для них одинаков: 

<VictoryChart
            theme={VictoryTheme.material}
            domain={{ y: [0, 50] }}
            domainPadding={130}
        >
            
            <VictoryAxis
                //padding={{ left: 50, right: 50  }}
                tickValues={date}
                tickFormat={ (t, i) => { return t + ' '+ month[i]} }   
            />

             <VictoryAxis
               dependentAxis
            />
 
            <VictoryStack
                colorScale={this.state.colors}>
               
            </VictoryStack> 
        </VictoryChart>

Итак, мой вопрос: как мне создать интервал между значениями тиков по оси .

1 Ответ

0 голосов
/ 11 августа 2018

Вы можете использовать опору fixLabelOverlap следующим образом: 

<VictoryAxis
 tickValues={date}
 tickFormat={ (t, i) => { return t + ' '+ month[i]} }
 fixLabelOverlap 
/>

Или вы можете использовать значение стиля angle для размещения ваших этикеток вертикально 

<VictoryAxis
 tickValues={date}
 tickFormat={ (t, i) => { return t + ' '+ month[i]} }
 style={{tickLabels: { angle: 90 }}}
/>
...