javascript - 如何在 Google ColumnChart 中放置一个图标

Question

我有一个只有一列的柱形图栏，我想在栏的顶部放置一个图标。这个栏是随机动态变化的。我检查了互联网和 Google Chart API 上的一些来源，但找不到解决方案。是有什么办法吗？下面你可以看到属于我的图表的代码

这是演示，让您了解我的网格和图表

https://stackblitz.com/edit/angular-pt2kha?file=app/grid-list-overview-example.html

这是我希望看到的

我在下面尝试生成下面的柱形图

TS 文件

    title= 'Temperature';
      type = 'ColumnChart';
      data= [['',25]];
      columnNames= ['Element', 'Temperature'];
      options= {
        backgroundColor: '#fafafa',
        legend: {position: 'none'},
        animation: {
          duration: 250,
          easing: 'ease-in-out',
          startup: true,
        },
        bar: {
          groupWidth: 50
      },
      hAxis: {
        baselineColor: 'none',
        ticks: []
      },
      vAxis: {
        baselineColor: 'none',
        ticks: [],
        viewWindow: {
          max:40,
          min:0
        }
      }
    }
       width=100;
       height=300;
ngOnInit()
{
   interval(2000).subscribe(()=>{
      this.data = [
      ['', (Math.random() * 41)],
    ];
    });
}

HTML 文件

  <div style="border-style:solid;border-width:1px;">
              <google-chart #chart 
              [title]="title"
              [type]="type"
              [data]="data"
              [columnNames]="columnNames"
              [options]="options"
              [width]="width"
              [height]="height"
              >
              </google-chart>
          </div>

Answer 1

您可以使用图表方法添加图标 getChartLayoutInterface() & getBoundingBox()

在图表的'ready' 事件中，找到柱的位置，
然后放置图像。

虽然不是angular，但是效果一样，
请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [{v: 'a', p: {thumb: 'clone_old.png'}}, 20],
    [{v: 'b', p: {thumb: 'boba_fett.png'}}, 15],
    [{v: 'c', p: {thumb: 'jango_fett.png'}}, 30],
    [{v: 'd', p: {thumb: 'clone_3.png'}}, 5],
    [{v: 'e', p: {thumb: 'clone_2.png'}}, 25]
  ]);

  var options = {
    legend: 'none'
  };

  var container = document.getElementById('chart_div');
  var containerBounds = container.getBoundingClientRect();
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      var barBounds = chartLayout.getBoundingBox('bar#0#' + i);
      var path = 'http://findicons.com/files/icons/512/star_wars/32/';
      var thumb = container.appendChild(document.createElement('img'));
      thumb.src = path + data.getProperty(i, 0, 'thumb');
      thumb.style.position = 'absolute';
      thumb.style.top = (barBounds.top + containerBounds.top - 40) + 'px';
      thumb.style.left = (barBounds.left + containerBounds.left + (barBounds.width / 2) - 16) + 'px';
    }
  });

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

`