Question

I am trying to create new custom plugin for chart.js and having issues with type error while getting dataset option from chart object.

这是原始法典。

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;

    ...

Here is chart options for doughnut.

  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],
  );

我愿从后面的海标中抽取轮用和环绕,我如何能够这样做?

I have tried to log the datasetMeta to the browser console but it has _dataset property. Above code is working correctly but I am getting only typescript error, and also I only want to get rotation and circumference for first dataset so if you know another way to get them, please help me.

Answer 1

If you want to work with dataset metas, you can obtain the dataset also as datasetMeta.controller.getDataset() but this will always have the type ChartDataset, source, and not the TType specific ChartDataset<TType>, so you ll have to cast it to ChartDataset< doughnut > (at least we re not casting to any):

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

It s interesting that datasetMeta.dataset property (without underscore) is always null.

请注意,您的做法不会回馈rotation or circumference/code>。如果数据集没有列出(例如,你可在图表<代码>options中将其全球定位为options.rotation)。从这个意义上来说,你可以总是使用<代码>chart的物体,直接检索这些选择,其效力与使用数据集的元数据相同。

友情链接