chartjs：x轴未显示所有值，刻度线之间的距离并不代表值之间的距离

Question

我使用反应图表来显示热泵的功率细节。制造商提供的外部温度值的距离不同。例如[“ -22”，“-15”，“-7”，“ 2”，“ 7”，“ 12”]度。 x轴值显示为相同。

另一个问题是，尽管有足够的空间，但仅显示第二个刻度。

请参阅所附图片。

代码如下：

    const chartData = {
      labels: outsideTemperatures,
      series: powerSerieses,
    };

    const options = {
      height: '350px',
      lineSmooth: false,
      plugins: [
        ctLegend({
          legendNames: flowTemps,
          position: 'bottom',
        }),
      ],
    };

    return (
      <div className="chart-container chart-heatpump-data">
        <div className="chart-axis-label vertical">
          Wärmeenergie in Watt
        </div>
        <ChartistGraph data={chartData} options={options} type={'Line'}
          className={'left-floated chart-with-axis-title colored'}
        />
        <div className="chart-axis-label horizontal">
          °C
        </div>
      </div>

    );

所以我有两个问题：

1. 如何在刻度线中显示代表值之间距离的距离？

2. 为什么没有足够的空间显示所有的价格变动？