将 html 注入 ng2-chart 工具提示以预览图像

Question

我有带有相关分数的图像流到我的应用程序。随着分数的到来，我使用 ng2-charts 将它们绘制在折线图上。

我想自定义图表上的工具提示，以显示它附带的图像的较小预览。我已经四处搜寻，但无法弄清楚如何将自定义 html 注入工具提示，或者是否可以在不创建自定义图表的情况下进行。

任何关于这是否可行以及如何实现的建议将不胜感激。

这是在 Ionic 4 和 angular 6 中，我的模块版本是：

• “ng2-charts”：“^2.2.2”，
• "chart.js": "^2.8.0",

不确定这对我的问题是否必要，但这是我到目前为止设置图表的方式。

• 降价

<ion-content padding>
  <div class="row" style="display: block;">
    <div class="col-md-6">
      <div style="display: block;">
      <canvas baseChart width="1200" height="600"
                  [datasets]="lineChartData"
                  [labels]="lineChartLabels"
                  [options]="lineChartOptions"
                  [colors]="lineChartColors"
                  [legend]="lineChartLegend"
                  [chartType]="lineChartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
      </div>
    </div>
  </div>
</ion-content>

• 初始化图表

  // Initializing Chart settings
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';
  public lineChartData:ChartDataSets[] = [{ data: this.scoreArr, label: 'Image Scores' }];
  public lineChartLabels:Label[] = [];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
        }
      ]
    },
    annotation: {
      annotations: [
        {
          type: 'line',
          mode: 'vertical',
          scaleID: 'x-axis-0',
          value: 'March',
          borderColor: 'orange',
          borderWidth: 2,
          label: {
            enabled: true,
            fontColor: 'orange',
            content: 'LineAnno'
          }
        },
      ],
    }
  };
  public lineChartColors:Color[] = [
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    }
  ];

Answer 1

致任何好奇的人。就是这样。但是，当您停止悬停时，工具提示不会消失，但我会尽快解决。

  customTooltips = function(tooltip) {

    //**************** This is what was messing me up
    var tooltipEl = document.getElementById('chartjs-tooltipsdfljsdflkswdjf');

    // Apparently grabbing my existing tooltipel was causing my issue
    // if you make tooltipel null and just make your own following the
    // chart.js docs this will work fine.
    // ***************

    if (!tooltipEl) {
      console.log("tooltipel was null");
      tooltipEl = document.createElement('div');
      tooltipEl.id = 'chartjs-tooltip';
      tooltipEl.innerHTML = "<table></table>"
      document.body.appendChild(tooltipEl);
    }

    // Hide if no tooltip
    if (tooltip.opacity === 0) {
      tooltipEl.style.opacity = '0';
      return;
    }
    tooltipEl.classList.remove('above','below','no-transform');
    if (tooltip.yAlign) {
      tooltipEl.classList.add(tooltip.yAlign);
    } else {
      tooltipEl.classList.add('no-transform');
    }

    function getBody(bodyItem) {
      return bodyItem.lines;
    }

    // Set Text
    if (tooltip.body) {
      console.log("Bodys not null: ", tooltip.body);
      var titleLines = tooltip.title || [];
      var bodyLines = tooltip.body.map(getBody);
      var innerHtml = '<thead>';
      titleLines.forEach(function(title) {
        innerHtml += '<tr><th>' + title + '</th></tr>';
        innerHtml += '<tr><th><img src="https://www.mariowiki.com/images/thumb/2/2b/Marioptds.png/146px-Marioptds.png" style="width:42px;height:42px;border:0;"/></th></tr>';
      });
      innerHtml += '</thead><tbody>';
      bodyLines.forEach(function(body, i) {
        var colors = tooltip.labelColors[i];
        var style = 'background:' + colors.backgroundColor;
        style += '; border-color:' + colors.borderColor;
        style += '; border-width: 2px';
        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
        innerHtml += '<tr><td>' + span + body + '</td></tr>';
      });
      innerHtml += '</tbody>';
      var tableRoot = tooltipEl.querySelector('table');
      console.log('TableRoot: ' + tableRoot);
      tableRoot.innerHTML = innerHtml;
    }
    // `this` will be the overall tooltip
    var position = this._chart.canvas.getBoundingClientRect();

    // Display, position, and set styles for font
    tooltipEl.style.opacity = '1';
    tooltipEl.style.position = 'absolute';
    tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
    tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
    tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
    tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
    tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    tooltipEl.style.pointerEvents = 'none';
  };




  // Initializing Chart settings
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';
  public lineChartData:ChartDataSets[] = [{ data: this.scoreArr, label: 'Image Scores' }];
  public lineChartLabels:Label[] = [];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
        }
      ]
    },
    annotation: {
      annotations: [
        {
          type: 'line',
          mode: 'vertical',
          scaleID: 'x-axis-0',
          value: 'March',
          borderColor: 'orange',
          borderWidth: 2,
          label: {
            enabled: true,
            fontColor: 'orange',
            content: 'LineAnno'
          }
        },
      ],
    },
    tooltips: {
      enabled: false,
      mode: 'index',
      position: 'nearest',
      custom: this.customTooltips
    }
  };
  public lineChartColors:Color[] = [
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    }
  ];