javascript - 如何使用 Angular 和 ng2-google-charts 在谷歌图表工具中将 SVG 图像作为注释

Question

我想创建一个显示一些测量值并添加一些注释作为图标的组件。我将 Angular 与 ng2-google-charts 一起用于图表。在https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#annotating-data上有一个列角色 annontationText 的示例，我想对 annontation 做同样的事情。

但是我无法将注释切换为 html。但是带有 annontationText 的示例的方式也不适合我。我不知道错误是否来自角度组件，或者我是否监督了某些事情。

import {Component, Input, OnInit} from '@angular/core';
@Component({
  selector: 'app-measurement',
  templateUrl: './measurement.component.html',
  styleUrls: ['./measurement.component.css']
})
export class MeasurementComponent implements OnInit {
  plot;
  constructor() {}
  ngOnInit() {
     this.createPlot('Test');
  }
  createPlot(title) {
    this.plot = {
      chartType: 'LineChart',
      options:
        {
          title: title,
          height: '600px',
          curveType: 'function',
          hAxis: {title: 'x'},
          vAxis: {  title: 'y' }
        },
      dataTable: [
        [ {  'id': 'x', 'label': 'x','type': 'number' },
          {  'id': 'y', 'label': 'y','type': 'number' },
          {'id': 'icon', 'label': 'icon', 'type': 'string', 'role': 'annotation', p: {html: true}} ],
        [0.0005, 1434,null],
        [0.001, 1436,null],
        [0.0015, 1435, '<img src="./assets/img/icon1.svg">'],
        [0.002, 1429, '<img src="./assets/img/ic_bench.svg">'],
        [0.0025, 1439, null]
        [0.003, 1451, null],
      ]
    };
  }
}

但它不会显示图像，而只会显示 HTML 文本。

标签： javascriptangulargoogle-visualization