如何在反应本性上的linechart中绘制2个数据

Question

我试图在React Native上的同一linechart中绘制02个数据。我正在为此目的使用反应响应 - 基础。我可以使用此库绘制01个数据，尽管我无法在同一图中绘制02个数据。谁能帮我吗？

 export default class Tela02 extends Component {
render() {
    const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
    const labels = ['10/01', '11/01', '12/01', '13/01' , '14/01' , '15/01', '16/01', '17/01', '18/01', '19/01', 
    '20/01', '21/01', '22/01','23/01', '24/01']
    const config = {
        line: {
            strokeWidth: 1, 
            strokeColor: '#216D99'
        },
        area: {
            visible: false,
        },
        yAxis: {
            labelColor: '#54a0ff'
        },
        xAxis: {
            visible: true,
            labelColor: '#54a0ff',
        },
        grid: {
            strokeColor: '#c8d6e5',
            stepSize: 30
        },
        insetY: 10, 
        insetX: 10,
        backgroundColor: '#fff'
    }
    return(
        <View>
            <View>
                <Text>{this.props.item.name}</Text>             
                <Text>{this.props.item.email}</Text>
            </View>
            <LineChart style={{height: 500}} config={config} data={data} xLabels={labels}/>
        </View>
    )
}

}

Answer 1

您正在使用什么组件？我在应用程序中使用victorline在同一图中绘制03个数据。检查链接中的示例 -> https://formidable.com/open-source/victory/docs/victory-line

这也是我的代码的示例：

        <VictoryLegend x={legendWidht} y={legendHeight}
          orientation='horizontal'
          gutter={10}
          style={{ border:{ stroke:"black"}, title: {fontSize: 20} } }
          data={[
             {name: this.props.item.x, symbol:{fill:'blue'}},
             {name: this.props.item.y, symbol:{fill:'green'}},
             {name: this.props.item.z, symbol:{fill:'red'}}
             ]}
        />

您的数据必须处于格式 ->

{ " datax"：[{" x"：1549343469000，" y"：0.952728}，{" x"：1549343635000，" y"：0.230757}]， " datay"：[{" x"：1549343469000，" y"：0.857968}，{" x"：1549343635000，" y"：0.326508}]， " dataz"：[{" x"：1549343469000，" y"：1.28743}，{" x"：1549343635000，" y"：0.27925}]，};