Victory-native 的 VictoryBar 标签显示不正确答案

【问题标题】：Victory-native's VictoryBar labels not displaying correctlyVictory-native 的 VictoryBar 标签显示不正确
【发布时间】：2019-07-07 16:03:56
【问题描述】：

我的 VictoryBar 图表无法在我的 React Native 应用程序中正确显示标签。 x 轴代表天数，y 轴代表数值。我想显示图表每个条形上方的值，但它显示日期。我已经设置了标签属性，但它什么也没做。如图所示，当我 console.log(d) 时没有任何反应。这段代码的结果如下。

"react-native": "0.59.9" “胜利原生”：“^32.0.2” "react-native-svg": "^9.5.1",

谢谢

<VictoryChart domainPadding={70}>
  <VictoryBar 
     data={bars} 
     x="label"  
     y="value"
     // animate={{ onLoad: { duration: 1000 } }}
     style={{ data: { width: 20, fill: (d) => d.x === 3 ? "#000000" : "#49C6B7" }}}
     labels={(d)=>{console.log(d);return d.y}}
  />
  <VictoryAxis
    //x
    tickLabelComponent={<VictoryLabel angle={45} />}
    style={{
      axis: {stroke: 'grey'},
      ticks: {stroke: 'white'},
      tickLabels: {fontSize: 12, padding: 3, marginLeft:10, stroke:"white", verticalAnchor: "middle", textAnchor:'start'}
    }}
  />
  <VictoryAxis
  //y
    tickFormat={(d)=> numeral(d).format('0.0a')}
    dependentAxis
    style={{
    axis: {stroke: "grey"},
    grid: {stroke:'grey'},
    tickLabels: {fontSize: 0, padding: 0,   stroke:'white'}
    }}
  />
</VictoryChart>

【问题讨论】：

好的...通过将数据更改为具有“x”和“y”值的对象数组来保存自己。而不是 x 和 y，我有“标签”和“价值”。否则，我无法弄清楚如何完成这项工作。
可以分享一下，如何在 Y 轴上显示 K 和 M 的值，因为我无法显示超过 1,00,000 个值。可以请帮助我。我卡住了。谢谢

标签： react-native victory-charts

【解决方案1】：

labels={({ datum }) => `${datum.y}`}

import { VictoryBar,VictoryChart,VictoryAxis,VictoryTheme } from "victory-native";

<>
      <VictoryChart
  domainPadding={{ x: 20 }}
>
  <VictoryBar
    data={[
      { x: "Year 1", y: 150 },
      { x: "Year 2", y: 250 },
      { x: "Year 3", y: 100 },
      { x: "Year 4", y: 750 },
      { x: "Year 5", y: 100 }
    ]}
    style={{
      data: { fill: "black", width: 12 }
    }}
    animate={{
      onExit: {
        duration: 500,
        before: () => ({
          _y: 0,
          fill: "orange",
          label: "BYE"
        })
      }
    }}
  />
  </VictoryChart>
<VictoryChart
    responsive={false}
    animate={{
      duration: 500,
      onLoad: { duration: 200 }
    }}
    domainPadding={{ x: 0 }}
    theme={VictoryTheme.material}
  >
    <VictoryAxis />
    <VictoryBar
      barRatio={1}
      cornerRadius={0} 
      style={{ data: { fill: "#6DB65B" } }}
      alignment="middle"
      labels={({ datum }) => `${datum.y}`} // <-- important
      data={[
        { x: "Year 1", y: 150 },
        { x: "Year 2", y: 250 },
        { x: "Year 3", y: 100 },
        { x: "Year 4", y: 750 },
        { x: "Year 5", y: 100 }
      ]}
    />
  </VictoryChart>
  </>

【讨论】：