Question

我还没有找到这篇文章。我想显示一个带有x轴渲染的图表Dates＆amp;使用左侧最新数据的时间。我原本希望只是反转数据属性数组就可以了，但是反应库比这更智能。

那么，如何对x轴下降进行排序？

代码示例

function ExampleGraph(props) {
  const {
    data,
    x, y,
  } = props

  // const keys = Object.keys(data)
  // if(keys.length>2){
  //   console.error({data}, "has too many dimensions for x-y")
  // }
  const keys=[x,y]

  const xyData = (()=> {
    const xKey = keys[0]
    const yKey = keys[1]

    const xArgs = data.map(r => (r[xKey]))
    const yArgs = data.map(r => (r[yKey]))

    const coords = xArgs.map((x, i) => ({
      x: x,
      y: yArgs[i] 
    }))

    return coords
  })()

  return (
    <XYPlot
    width={1000}
    height={640}>
      <HorizontalGridLines />
      <LineSeries
        data={xyData}
      />
      <XAxis />
      <YAxis />
    </XYPlot>
  )
}

渲染组件的BlazeJS（MeteorJS）模板

<template name="stepCountsGraph">
  <div>
    {{> React
      component=ExampleGraph
      data=stepCounts
      y="step_count"
      x="time"
    }}
  </div>
</template>

Answer 1

您应该能够通过指定来反转xDomain！ react-vis为每个维度接受各种道具（例如xDomain / xRange / xType和yDomain / yRange / yType），因此如果要控制图表的确切布局，可以指定部分或全部属性。为了实现您所描述的反向域效应，您可以将片段修改为类似这样的

border-radius

我希望能回答你的问题！我已经打开了一个问题，将这种类型的说明添加到文档here。

如何在react-vis中反转/下降/排序x轴数据

1 个答案: