创建 XY 图表，React-Native答案

【问题标题】：Create XY chart, React-Native创建 XY 图表，React-Native
【发布时间】：2017-08-05 04:11:47
【问题描述】：

如何在 react-native 中创建基本的 xy 图表？例如我有数据：

chart_data = [
[0,0],[0,1],[1,1],[1,0],[0,0]
]

这是正方形的点。大多数库都提供创建折线图，这将创建其他折线型图表，这些点的结果将是 - 空中飞人。请帮帮我

【问题讨论】：

标签： react-native charts

【解决方案1】：

你应该试试MPAndroidChart，甚至还有react native wrapper for it。

【讨论】：

【解决方案2】：

使用react-native-chart

import React, { StyleSheet, View, Component } from 'react-native';
import Chart from 'react-native-chart';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    chart: {
        width: 200,
        height: 200,
    },
});

const data = [
    [0, 1],
    [1, 3],
    [3, 7],
    [4, 9],
];

class SimpleChart extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Chart
                    style={styles.chart}
                    data={data}
                    verticalGridStep={5}
                    type="line"
                 />
            </View>
        );
    }
}

请注意，MPAndroidChart 仅支持 Android，而 react-native-chart 支持 Android 和 iOS。

示例图表：

【讨论】：

我尝试使用那个库。如果我将您示例中的数据替换为任何形状的点（如主题中的正方形），我将得到我不需要的结果。可能是我不了解如何使用该模块。你能解释一下我应该如何生成数据点来绘制正方形

【解决方案3】：

您可以尝试使用Canvas 及其方法。在那里你可以画点线或形状...

【讨论】：