如何在胜利本机中使用自己的数据键,而不是默认用于绘制图表的x和y

时间:2019-06-19 14:52:26

标签: react-native expo victory-charts react-native-svg-charts

如何在胜利本机中使用自己的数据键,而不是默认用于绘制图表的x和y 如下面的代码所示,我想使用myx而不是x来表示x轴上的数据,并在y轴上将其表示为y。

代替这个。...

sampleData=[
  { key:'1',x: 'Jan', y: 5.5, c0: 2,date:'18 Jan 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'2',x: 'Feb', y: 3, c0: 1.5, date:'08 Feb 2019',bank:'Bank Of Baroda',txid:'76jhdg74rh4h848r58'},
  { key:'3',x: 'March', y: 5, c0: 2 ,date:'19 March 2019',bank:'State Bank of India',txid:'76jhdg74rh4h848r58'},
  { key:'4',x: 'Apr', y: 4, c0: 1 ,date:'18 Apr 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'5',x: 'May', y: 6, c0: 2 ,date:'15 May 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'6',x: 'June', y: 2, c0: 4 ,date:'11 June 2019',bank:'Canara Bank',txid:'76jhdg74rh4h848r58'},
  { key:'7',x: 'July', y: 3, c0: 1 ,date:'28 July 2019',bank:'Punjab National Bank',txid:'76jhdg74rh4h848r58'},
]

我希望此数据用于图表。...

sampleData=[
  { key:'1',myx: 'Jan', step: 5.5, c0: 2,date:'18 Jan 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'2',myx: 'Feb',step: 3, c0: 1.5, date:'08 Feb 2019',bank:'Bank Of Baroda',txid:'76jhdg74rh4h848r58'},
  { key:'3',myx: 'March', step: 5, c0: 2 ,date:'19 March 2019',bank:'State Bank of India',txid:'76jhdg74rh4h848r58'},
  { key:'4',myx: 'Apr', step: 4, c0: 1 ,date:'18 Apr 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'5',myxx: 'May', step: 6, c0: 2 ,date:'15 May 2019',bank:'Bank Of India',txid:'76jhdg74rh4h848r58'},
  { key:'6',myx: 'June', step: 2, c0: 4 ,date:'11 June 2019',bank:'Canara Bank',txid:'76jhdg74rh4h848r58'},
  { key:'7',myx: 'July', step: 3, c0: 1 ,date:'28 July 2019',bank:'Punjab National Bank',txid:'76jhdg74rh4h848r58'},
]

在这种情况下,我想将myx用作x轴数据,并将step用作y轴数据来绘制图表

1 个答案:

答案 0 :(得分:0)

你可以这样做:

        <VictoryLine
          data={ sampleData }
          y={"step"}
          x={"myx"}
        />

您可以通过添加这些属性来定义 x 和 y 轴