Question

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

但是我无法将注释切换为html。但是，带有annottationText的示例的方式也对我不起作用。我不知道这是由于角度分量引起的错误，还是我监督了一些事情。

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文本。

如何使用Angular和ng2-google-charts将SVG图像作为Annottation放置在Google图表工具中

0 个答案: