如何使用 react-native-svg-charts 显示带有时间序列数据的垂直网格

Question

The problem? This is probably a lack of understanding from my side rather than an issue with "react-native-svg-charts", but perhaps others are having a similar issue and it'll be worth having the solution here. I can't get vertical gridlines to display correctly when using time series data, the only vertical gridline shown is the Y-Axis of the chart.

There isn't much documentation on how the custom grid works, so it is hard to know where I'm going wrong with this. If I use the index (rather than value) of the data.map function in the custom grid I don't even get the vertical line in the Y-Axis. What am I doing wrong?

Platform

• [x ] iOS X and 9

React Native version: "dependencies": {

• "axios": "^0.18.0", "expo": "^30.0.1", "react": "16.3.1", "react-native": " https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz ", "react-native-svg": "^7.0.2", "react-native-svg-charts": "^5.2.0", "react-navigation": "^2.14.2",

}

Code below:

```

javascript
import React from "react";
import { Dimensions, StyleSheet, View } from "react-native";

import { LineChart, YAxis, XAxis } from "react-native-svg-charts";
import { G, Line } from "react-native-svg";
import * as shape from "d3-shape";
import * as scale from "d3-scale";
import moment from "moment";

const data = [
{
    value: 50,
    date: new Date(2018, 0, 1, 2)
},
{
    value: 10,
    date: new Date(2018, 0, 1, 9)
},
{
    value: 150,
    date: new Date(2018, 0, 1, 10)
},
{
    value: 10,
    date: new Date(2018, 0, 1, 13)
},
{
    value: 100,
    date: new Date(2018, 0, 1, 21)
},
{
    value: 20,
    date: new Date(2018, 0, 2, 0)
},
{
    value: 115,
    date: new Date(2018, 0, 2, 8)
},
{
    value: 75,
    date: new Date(2018, 0, 2, 10)
},
{
    value: 25,
    date: new Date(2018, 0, 2, 16)
},
{
    value: 125,
    date: new Date(2018, 0, 2, 17)
},
{
    value: 66,
    date: new Date(2018, 0, 2, 19)
},
{
    value: 85,
    date: new Date(2018, 0, 2, 23)
}
];

export default class ChartTest extends React.Component {
renderChart() {
    const xAxisHeight = 30;
    const verticalContentInset = { top: 10, bottom: 10 };

    const CustomGrid = ({ x, y, data, ticks }) => (
        <G>
            {// Horizontal grid
            ticks.map(tick => (
                <Line key={tick} x1={"0%"} x2={"100%"} y1={y(tick)} y2={y(tick)} stroke={"rgba(0,0,0,0.2)"} />
            ))}
            {// Vertical grid
            data.map((value, index) => (
                <Line key={index} y1={"0%"} y2={"100%"} x1={x(value)} x2={x(value)} stroke={"red"} />
            ))}
        </G>
    );

    return (
        <View style={{ height: 250, padding: 20, width: "90%", flexDirection: "row" }}>
            <YAxis
                style={{ marginBottom: xAxisHeight }}
                data={data}
                contentInset={verticalContentInset}
                yAccessor={({ item }) => item.value}
                xAccessor={({ item }) => item.date}
                svg={{
                    fill: "#FFFFFF"
                }}
                numberOfTicks={5}
                formatLabel={value => `${value} ºC`}
            />
            <View style={{ flex: 1, marginLeft: 10 }}>
                <LineChart
                    style={{ flex: 1 }}
                    data={data}
                    contentInset={verticalContentInset}
                    yAccessor={({ item }) => item.value}
                    xAccessor={({ item }) => item.date}
                    svg={{
                        stroke: "#81B0C0"
                    }}
                    scale={scale.scaleTime}
                    numberOfTicks={10}
                >
                    <CustomGrid belowChart={true} />
                </LineChart>
                <XAxis
                    data={data}
                    svg={{
                        fill: "#FFFFFF",
                        fontSize: 8,
                        fontWeight: "bold",
                        rotation: 20,
                        originY: 30,
                        y: 5
                    }}
                    xAccessor={({ item }) => item.date}
                    scale={scale.scaleTime}
                    numberOfTicks={10}
                    style={{ marginHorizontal: -10, height: xAxisHeight }}
                    contentInset={verticalContentInset}
                    formatLabel={value => moment(value).format("HH:mm")}
                />
            </View>
        </View>
    );
}
render() {
    return <View style={styles.container}>{this.renderChart()}</View>;
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: "#343334",
    alignItems: "center",
    justifyContent: "center"
}
});

This is what I get:

Answer 1

I've found a way. Although I do believe is not the optimal way.

I have to say I couldn't figure out what they do, but they helped me render the vertical lines:

gridMin={0}

This should work:

class BarChartHorizontalWithLabels extends React.PureComponent {

    render() {

        const data = [ 50, 10, 40, 95, 85 ]

        const CUT_OFF = 50
        const Labels = ({  x, y, bandwidth, data }) => (
            data.map((value, index) => (
                <Text
                    key={ index }
                    x={ value > CUT_OFF ? x(0) + 10 : x(value) + 10 }
                    y={ y(index) + (bandwidth / 2) }
                    fontSize={ 14 }
                    fill={ value > CUT_OFF ? 'white' : 'black' }
                    alignmentBaseline={ 'middle' }
                >
                    {value}
                </Text>
            ))
        )

        return (
            <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
                <BarChart
                    style={{ flex: 1, marginLeft: 8 }}
                    data={data}
                    horizontal={true}
                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    gridMin={0}
                >
                    <Grid direction={Grid.Direction.VERTICAL}/>
                    <Labels/>
                </BarChart>
            </View>
        )
    }

}

export default BarChartHorizontalWithLabels