Введите html в подсказку ng2-chart для предварительного просмотра изображения

Question

У меня есть изображения с оценками, связанные с ними, для потоковой передачи в мое приложение.По мере появления результатов я наносил их на график, используя ng2-диаграммы.

Я хочу настроить всплывающую подсказку на диаграмме, чтобы отобразить уменьшенный предварительный просмотр изображения, с которым она поставляется.Я искал вокруг, но не смог понять, как добавить пользовательский 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)'
    }
  ];