如何手动调整 Tremor 图表中的 y 轴

Question

我正在创建仪表板，而 tremor 做得很好。 我似乎无法解决这个 y 轴范围问题。 见下文。 工具提示显示周五有 22 次销售，而不是 12 次。

我在文档中看不到任何让我设置 yaxis 范围的内容。 我可以设置宽度和高度，我试过了，但没有任何变化，我的数据被隐藏了。 我只能猜测这一定是样式问题。 Y 轴范围最小 ~1000，最大 ~26000。 我目前的数据较少。

    function ChartView({ netSalesReport, daySalesReport, hourSalesReport, orderAmountReport }) {
  return (
    <>
      <Card marginTop="mt-6">
        <Title>Net Sales Report</Title>
        <AreaChart
          data={netSalesReport}
          dataKey="date"
          categories={["Total Amount"]}
          colors={["indigo"]}
          showLegend={false}
          valueFormatter={numberFormatter}
          height="h-72"
          marginTop="mt-8"
        />
      </Card>
      <ColGrid numColsMd={1} numColsLg={3} marginTop="mt-0" gapX="gap-x-6" gapY="gap-y-6">
        <Card marginTop="mt-6">
          <Title>Net Sales By Day</Title>
          <BarChart
            data={daySalesReport}
            dataKey="day"
            categories={["count"]}
            colors={["blue"]}
            showLegend={false}
            valueFormatter={numberFormatter}
            marginTop="mt-6"
            yAxisWidth="w-12"
          />
        </Card>
        <Card marginTop="mt-6">
          <Title>Net Sales By Hour</Title>
          <BarChart
            data={hourSalesReport}
            dataKey="hour"
            categories={["count"]}
            colors={["blue"]}
            showLegend={false}
            valueFormatter={numberFormatter}
            marginTop="mt-6"
            yAxisWidth="w-12"
          />
        </Card>
        <Card marginTop="mt-6">
          <Title>Order Amount</Title>
          <BarChart
            data={orderAmountReport}
            dataKey="Amount"
            categories={["count"]}
            colors={["blue"]}
            showLegend={false}
            valueFormatter={numberFormatter}
            marginTop="mt-6"
            yAxisWidth="w-12"
          />
        </Card>
      </ColGrid>
    </>
  );
}

Answer 1

需要确保以数据形式提供给图表的值是数字形式而不是字符串（即使我们使用格式化程序并将其结果作为字符串返回。

此处讨论的示例： https://github.com/tremorlabs/tremor/issues/247#issuecomment-1365856364