Question

人我一直试图在生成图形后以PDF格式打印图形，因此为了显示它们，我使用了扩展Chart类的类，然后使用ChildClass1.plugins.register（plugins）将插件注册到其中，然后制作了另一个ChildClass2类，它还扩展了相同的Chart类，然后重新生成所有图表，但是这次引用了不同的Canvas标签引用了不同的上下文，所以这里我的每个属性都不同

有一个看法

const ctDiv = <HTMLDivElement>document.createElement('div');
    let ct =  <HTMLCanvasElement> document.createElement('canvas');

    ctDiv.appendChild(ct);

    ct.height = extraOptions.height ? Number(extraOptions.height.replace(/[^\d+].*/, ''))  : 500;
    ct.width = extraOptions.width ? Number(extraOptions.width.replace(/[^\d+].*/, ''))  : 1024;

    ct.id = id + 'printable';

    ctDiv.style.height = '1024px'
    ctDiv.style.width = '1974px';
    ctDiv.style.overflow = 'scroll';


    const updatedOptions = { ...chartSet, ...{ options: { ...chartSet.options, responsive: false } } };
    let capturedGraph: any = new ChartCopy(ct, updatedOptions);

这次，它具有与实际显示的UI完全隔离的不同ID和大小。现在的问题是，如果ChildClass1在_meta属性中注册了插件，尽管方法相同，ChildClass2不会得到更新。

例如： CC1以响应模式创建图表，并且相应显示在每个条形图顶部的值

看看这个插件

const plugins = {
  id: 'scnb', 
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints) {
      const helpers = Chart.helpers;
      const ctx = chartInstance.chart.ctx;
      const fontColor = helpers.getValueOrDefault(
        chartInstance.config.options.showDatapoints.fontColor,
        chartInstance.config.options.defaultFontColor
      );
      const type = helpers.getValueOrDefault(
        chartInstance.config.options.showDatapoints.type,
        'vertical'
      );
      const pre = helpers.getValueOrDefault(
        chartInstance.config.options.showDatapoints.pre,
        ''
      );
      const after = helpers.getValueOrDefault(
        chartInstance.config.options.showDatapoints.after,
        ''
      );

      // render the value of the chart above the bar
      const DEAFULT_FONT = Chart.helpers.fontString(
        Chart.defaults.global.defaultFontSize,
        Chart.defaults.global.defaultFontStyle,
        Chart.defaults.global.defaultFontFamily
      );
      ctx.font = helpers.getValueOrDefault(
        chartInstance.config.options.showDatapoints.font,
        DEAFULT_FONT
      );
      ctx.textAlign =
        helpers.getValueOrDefault(
          chartInstance.config.options.showDatapoints.textAlign,
          chartInstance.config.options.defaultTextAlign
        ) || 'center';
      ctx.textBaseline = 'baseline';
      ctx.fillStyle = fontColor;
      let x1 = 100;
      let oldI = -1;
      let yPosV;
      chartInstance.data.datasets.forEach(function (dataset) {
        let index = dataset.data.indexOf(Math.max(...dataset.data));
        for (let i = 0; i < dataset.data.length; i++) {
          const model =
            dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          const scaleMax =
            dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale
              .maxHeight;
          const yPos =
            (scaleMax - model.y) / scaleMax >= 1 ? model.y + 20 : model.y - 5;

          if (dataset.data[i] === 0) { continue; }

          // console.log(dataset);

          const ff = new Intl.NumberFormat('en-US').format;
          const displayValue = ff(Math.round(Number(dataset.data[i])));
          if (type === 'arrowed') {

            ctx.fillText(
              ` ${x1 === 100 ? '___' : '' } ${pre} ${displayValue} ${after} ${x1 === -100 ? '___' : ''}`.trim(),
              model.x + x1 -5,
              yPos + 1
            );

            x1 = x1 === 100 ? -100 : 100;
            continue;
          }
          if (type === 'horizontalStacked') {
            return
            // if (index !== oldI) {
            //   console.log(yPos);
            //             yPosV = yPos * 0.95;
            //           }
            // dataset.data[i] < 0
            //   ? ctx.fillText(
            //     `${pre} ${displayValue} ${after}`.trim(),
            //       model.x - 10,
            //       yPosV += 10
            //     )
            //   : ctx.fillText(
            //       `${pre} ${displayValue} ${after}`.trim(),
            //       model.x + 10,
            //       yPosV += 10
            //   );
            // oldI = index;
            // continue;
          }

          if (type === "horizontal") {

            Math.round(Number(dataset.data[i])) < 0
              ? ctx.fillText(
                  `${pre} ${displayValue} ${after}`.trim(),
                  model.x - 35,
                  yPos + 5
                )
              : ctx.fillText(
                  `${pre} ${displayValue} ${after}`.trim(),
                  model.x + 35,
                  yPos + 5
                );
          } else {
            ctx.fillText(
              `${pre} ${displayValue} ${after}`.trim(),
              model.x,
              yPos
            );
          }
        }
      });
    }
  }


};

现在我为CC2运行相同的程序，以便始终在桌面大小的屏幕上打印它们图表绘制良好，但要显示在每个柱上方的值仍处于响应模式它们是根据移动视图分开的。

超级Chart类原型Object可能保持不变。我得到的唯一可能方法是chart.destroy（），但这是从荒谬的UI / UX中删除它。我希望有解决方案。

为了使其成为可能，我必须销毁Childclass1创建的图表。

在条形图和水平图上显示值

0 个答案: