React Native Victory Chart隐藏轴线但保留刻度值格式问题

fnatzsnv  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(115)

我设法删除了Y轴和X轴线,但这导致了X轴日期值的问题。以前,VictoryChart可以根据数据量将X轴日期很好地呈现为月、日或年。现在一团糟。
我尝试将这一行添加到VictoryAxis中,但显示无效日期

tickFormat = {d => new Date(d.date_time)}

查看结果

代码:

export function VictoryAreaChart({ chartData, yName }) {
  return (
    <VictoryChart>
      <VictoryLine
        animate={{ easing: 'exp' }}
        domainPadding={{y: 5}}
        height={150}
        interpolation="natural"
        x={d => new Date(d.date_time)}
        y={yName}
        data={chartData}
        style={{
          data: {
            stroke: '#4E54C8',
            strokeWidth: 2
          }
        }}
        data={chartData}
        events={[
          {
            target: "data",
            eventHandlers: { 
            }
          }
        ]}
      />
      <VictoryAxis
        style={{ axis: {stroke: { fill: "none" } }}}
      />
      <VictoryAxis dependentAxis
        style={{ axis: {stroke: { fill: "none" } }}}
      />
    </VictoryChart>
  );
}

以前X轴是什么样子的

w9apscun

w9apscun1#

VictoryAxis中添加tickFormat,并编写一个函数以格式化日期显示(如有必要)。

<VictoryAxis
  tickFormat={item => formatDate(item)} 
  style={{ axis: {stroke: { fill: "none" } }}}
/>

相关问题