如何从chart.js打字稿中的图表对象获取数据集对象？

Question

我正在尝试为 Chart.js 创建新的自定义插件，但在从图表对象获取数据集选项时遇到类型错误问题。

这是插件代码。

const gaugeNeedle: Plugin<"doughnut"> = {
  id: "gaugeNeedle",
  afterDatasetDraw(chart: Chart<"doughnut">, args, options) {
    if (!chart || typeof options.needleValue === "undefined") {
      return;
    }
    const {
      ctx,
      chartArea: { width },
    } = chart;
    const datasetMeta: ChartMeta<"doughnut"> = chart.getDatasetMeta(0);
    const { rotation, circumference } = datasetMeta._dataset; // datasetMeta object hasn't got _dataset property
    ctx.save();
    const { needleValue, dataTotal } = options;
    const angle =
      (((1 / dataTotal) * needleValue * circumference - (90 - rotation)) /
        180) *
      Math.PI;
    const cx = width / 2;
    const cy = datasetMeta.data[0].y;

    ...

这是甜甜圈的图表选项。

  const data = useMemo<ChartData<"doughnut", number[], string>>(
    () => ({
      labels: ["Filled", "Unfilled"],
      datasets: [
        {
          label: "Speedometer",
          data: [value, 100 - value], // Example data: 65% filled, 35% unfilled
          borderWidth: 0,
          borderRadius: 10,
          cutout: "85%", // Adjust for thicker/thinner gauge appearance
          circumference: 240,
          rotation: -120,
          backgroundColor: (context: ScriptableContext<"doughnut">) => {
            const chart = context.chart;
            const { chartArea } = chart;
            if (!chartArea) {
              return undefined;
            }
            if (context.dataIndex === 0) {
              return getGradient(chart, value);
            } else {
              return "grey";
            }
          },
        },
      ],
    }),
    [value],
  );

我想从内部图表对象获取旋转和周长

afterDatasetDraw

，我该怎么做？

我尝试将

datasetMeta

记录到浏览器控制台，但它具有

_dataset

属性。 上面的代码工作正常，但我只收到打字稿错误，而且我只想获取第一个数据集的旋转和圆周，因此如果您知道另一种获取它们的方法，请帮助我。

Answer 1

如果您想使用数据集元，您也可以通过

datasetMeta.controller.getDataset()

的形式获取数据集，但这 将始终具有类型

ChartDataset

、source、 而不是

TType

特定的

ChartDataset<TType>

，所以你必须将其投射到

ChartDataset<'doughnut'>

（至少我们不会投射到

any

）：

const datasetMeta = chart.getDatasetMeta(0);
const dataset = datasetMeta.controller.getDataset() as ChartDataset<'doughnut'>;
const { rotation, circumference } = dataset;

有趣的是，

datasetMeta.dataset

属性（无下划线）始终是

null

。

请注意，如果

rotation

或

circumference

未在数据集中设置，您的方法将不会返回它们的值（例如，您可以在图表

options

中将它们全局设置为

options.rotation

）。从这个意义上说，您始终可以使用

chart

对象直接检索这些选项，与使用数据集元的效果相同。