如何在Google ColumnChart中放置图标 [英] How to place an icon inside Google ColumnChart

问题描述

我有一个只有一列的columnchart栏，我想在该栏的顶部放置一个图标，该栏是随机随机变化的。我检查了Internet和Google Chart API上的一些资源，但找不到解决方案。可以看到下面的代码属于我的图表

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

我尝试了什么下方以生成下面的柱形图

TS文件

  title ='Tempe批准； 
 type = ColumnChart； 
 data = [[’’，25]]; 
 columnNames = ['元素'，'温度']; 
 options = {
 backgroundColor：'#fafafa'，
图例：{position：'none'}，
动画：{
持续时间：250，
缓动：'ease-in-out'，
启动：true，
}，
条形：{
 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> 
  

解决方案

您可以使用图表方法<$ c $添加图标c> getChartLayoutInterface（）& getBoundingBox（）

在图表的就绪 事件，找到条形图的位置，

然后放置图像。

虽然不是成角度的，但它的工作原理相同，

请参见以下工作片段...

  google.charts.load（'current'，{package：['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 = {图注：'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 =路径+ data.getProperty（i，0，'thumb'）; thumb.style.position =绝对； 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>  

`

I have columnchart bar which has one column and I wanna place an icon top of the bar.This bar is dynamically changing as randomly.I checked some sources on the internet and Google Chart API but couldn't find a solution.Is there any way to do that?Below you can see the code belongs to my chart

Here it's demo to give you idea about my Grid and Chart also

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

Here what I expect to see

What I tried below to generate this Column Chart below

TS File

    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 File

  <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>

解决方案

you can add icons using chart methods getChartLayoutInterface() & getBoundingBox()

on the chart's 'ready' event, find the position of the bar,
then place the image.

although not angular, it will work the same,
see following working snippet...

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>

`

这篇关于如何在Google ColumnChart中放置图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！