重新绘制x轴图，不显示0值

Question

我用重绘图来显示区域图。我想显示浓度值随时间的变化，包括当浓度为0时。

目前，在数据集中的情况下，我无法获得x轴来显示没有任何时间值/集中值的0值，即，

const outputTest = {
    Dexamphetamine: [
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 9,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 10,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 11,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 4,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 12,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 13,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 14,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 5,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 13,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 14,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 15,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 4,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 16,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 17,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 18,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 5,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 16,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 17,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 18,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 4,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 19,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 20,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 21,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 5,
      },
    ],
  };

这是当前如何设置图表的方法。

 <AreaChart
          width={500}
          height={100}
          data={substanceDetails[Substance]}
          syncId="time"
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="time" ticks={[25]}  domain={[0, 24]}/>
          <YAxis />
          <Tooltip />
          <Legend />
          <Area
            type="monotone"
            dataKey="concentration"
            stroke="#82ca9d"
            fill="#82ca9d"
          />
        </AreaChart>

当没有使用药物的时候，我将如何显示X值。根据文档，https://recharts.org/en-US/api/XAxis，域应该可以设置，但目前还不确定我在这里做错了什么。

Answer 1

我发现你的方法有两个问题。

1. 在您的XAxis定义中指定只有带有时间号的滴答才应该显示。但是您的数据集不包含25的时间值。假定-在示例数据集中XAxis上不呈现勾号.

1. 您的XAxis是一个具有指定(数字)域的数字轴。因此，您也需要将Axis设置为输入数字。

为了显示带有滴答的XAxis，您可以使用：

<XAxis dataKey="time" type="number" domain={[0, 24]} />

看到它在这里工作：https://codesandbox.io/s/frosty-thompson-7czww3?file=/src/App.js