无法在 ChartJS 中将刻度类型设置为自定义刻度

Question

赏金明天到期。 此问题的答案有资格获得+50声望赏金。 这家伙想提请更多人注意这个问题。

我按照 ChartJS 文档创建自定义比例： https://www.chartjs.org/docs/master/samples/advanced/derived-axis-type.html

首先，我将自定义比例定义为它自己的 class 扩展基本比例接口：

import { Scale, LinearScale, BubbleDataPoint, Chart, ChartTypeRegistry, ScatterDataPoint} from 'chart.js';



export default class SquareRootAxis extends Scale {
    static defaults: {} = {};
    _startValue: any;
    _valueRange: number;
    constructor(cfg: { id: string; type: string; ctx: CanvasRenderingContext2D; chart: Chart<keyof ChartTypeRegistry, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>; }) {
      super(cfg);
      this._startValue = undefined;
      this._valueRange = 0;
    }
  
    parse(raw: any, index: number) {
      const value = LinearScale.prototype.parse.apply(this, [raw, index]);
      return isFinite(value) && value > 0 ? value : null;
    }
  
    determineDataLimits() {
      this.min = 0.5
      this.max=31
    }

    buildTicks() {
        const userDefinedTicks = [1, 2, 3, 5, 7, 10, 15, 20, 25, 30];
        const ticks = [];
        for (const tick of userDefinedTicks) {
            ticks.push({
                value: tick
            });
        }
        return ticks;
    }
  
    /**
     * @protected]
     */
    configure() {
      const start = this.min;
  
      super.configure();
      this._startValue = Math.pow(start, 1/2);
      this._valueRange = Math.pow(this.max, 1/2) - Math.pow(start, 1/2);
    }
  
    getPixelForValue(value: number | undefined) {
      if (value === undefined ) {
        value = this.min;
      }
  
      return this.getPixelForDecimal(value === this.min ? 0 :
        (Math.pow(value, 1/2) - this._startValue) / this._valueRange);
    }
  
    getValueForPixel(pixel: number) {
      const decimal = this.getDecimalForPixel(pixel);
      return Math.pow(this._startValue + decimal * this._valueRange, 2);
    }
  }

然后我导入了自定义比例 Class 并在下面使用它：

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Scatter } from 'react-chartjs-2';
import SquareRootAxis from './sqaureRootAxis';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  CubeRootAxis
);

SquareRootAxis.id = 'squareRoot';

export function Chart(props: { chartData: ChartData }) {
  return <Scatter
    data={props.chartData}
    options={{
      responsive: true,
      scales: {
        x: {
          type: 'squareRoot',
        },
      },
    }}
  />;
}

但是当我将图表设置为自定义刻度名称时，出现以下 TS 错误：

类型 '"squareRoot"' 不可分配给类型 '"time" | “线性” | “对数” | “类别” | "timeseries"'.ts(2322) index.esm.d.ts(3618, 27): 预期类型来自属性'type'，在此处声明为类型'_DeepPartialObject<{ type: "time"; } & 省略 <CartesianScaleOptions

尽管遵循了文档，但 ChartJS 刻度类型似乎只识别内置刻度。 我究竟做错了什么？

Answer 1

首先在示例代码中，您的导入中似乎有错字：
import SquareRootAxis from './sqaureRootAxis 。

那么你似乎需要注册新的比例，我在你的代码中看不到，如下所示：

chart.register(SquareRootAxis);

出于某种原因，这在您链接中的代码底部进行了注释，并在此处进行了解释：
https://www.chartjs.org/docs/latest/developers/axes.html