無法在 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