Question

胜利新手，我需要在横轴上渲染一些标签，但我不知道如何。我可以在y轴上绘制它，但是我不理解如何在x轴上绘制它们。我真的没有关于它的文档。

也许我没有把我需要的所有道具放在标签上。我尝试过可以在下面看到，但是什么也没发生

import React, {Component} from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';
import {VictoryBar, VictoryChart, VictoryTheme, VictoryAxis, VictoryLabel} from "victory-native";

const data = [
    {x_axis: 'Mon', earnings: 10},
    {x_axis: 'Tue', earnings: 15},
    {x_axis: 'Wed', earnings: 7},
    {x_axis: 'Thu', earnings: 10},
    {x_axis: 'Fri', earnings: 17},
    {x_axis: 'Sat', earnings: 20},
    {x_axis: 'Sun', earnings: 2},
];

    const sansSerif = "'Roboto', 'Helvetica Neue', Helvetica, sans-serif";
const letterSpacing = "normal";
const fontSize = 12;
const baseLabelStyles = {
    fontFamily: sansSerif,
    fontSize,
    letterSpacing,
    padding: 10,
    fill: 'red',
    stroke: "transparent"
};

const centeredLabelStyles = assign({textAnchor: "middle"}, baseLabelStyles);
export default class App extends Component {

    render() {

        return (
            <View style={styles.chart}>
                <VictoryChart
                    domainPadding={15}
                    theme={VictoryTheme.material}
                    width={Dimensions.get('window').width - 22}
                    padding={{left: 42, right: 42, top: 14, bottom: 0}}
                    height={200}
                >
                    <VictoryAxis
                        crossAxis={true}
                        tickValues={[1, 2, 3, 4, 5, 6, 7]}
                        tickLabelComponent={<VictoryLabel dx={20}/>}
                        style={{
                            axis: {stroke: null},
                            axisLabel: {
                                centeredLabelStyles
                            },
                            grid: {
                                fill: "none",
                                stroke: "none",
                                pointerEvents: "painted"
                            },
                            tickLabels: {baseLabelStyles}
                        }}
                    />
                    <VictoryBar
style={{
                            data: {fill: 'white', width: 12, strokeLinejoin: 'round'},
                            tickLabels: {baseLabelStyles},
                            labels: {baseLabelStyles}
                        }}

                        baseProps
                        cornerRadius={{top: 6, bottom: 6}}
                        data={data}
                        x='x_axis'
                        y='earnings'
                    />
                </VictoryChart>
            </View>
        );
    }
}

我需要的是在胜利条的每个条下方绘制data.x_axis的每个字符串。这是我在这种配置下得到的：

http://i64.tinypic.com/j16pgl.png

抱歉，我不知道如何发布图片。

胜利本机-在横轴上渲染标签

0 个答案: