如何将图像或图标附加到谷歌折线图的边缘 [英] How can I attach the image or icon on edge of google line chart

问题描述

我想排成如下图：

或只是图像序列图是可能的？

像这样

有没有可能达到这个目的的方法？

解决方案使用 getChartLayoutInterface 方法

  var layout = chart.getChartLayoutInterface（）; 
  

查找点的（x，y）位置

  var xPos = layout.getXLocation（data.getValue（row，xColumn））; 
 var yPos = layout.getYLocation（data.getValue（row，yColumn））; 
  

然后手动添加图片并相应地进行调整

<

  google.charts.load（'current'，{packages：['corechart'，'line']}）; google.charts .setOnLoadCallback（drawBackgroundColor）;函数drawBackgroundColor（）{var data = new google.visualization.DataTable（）; data.addColumn（'number'，'X'）; data.addColumn（'number'，'Y'）; data.addRows（[[0,0]，[1,10]，[2,23]，[3,17]，[4,18]，[5,9]，[6,11]，[7， 27]，[8,33]，[9,40]，[10,32]，[11,35]，[12,30]，[13,40]，[14,42]，[15,47] ，[16,44]，[17,48]，[18,52]，[19,54]，[20,42]，[21,55]，[22,56]，[23,57]，[ 24，60]，[25,50]，[26,52]，[27,51]，[28,49]，[29,53]，[30,55]，[31,60]，[ 61]，[33,59]，[34,62]，[35,65]，[36,62]，[37,58]，[38,55]，[39,61]，[40,64] ，[41,65]，[42,63]，[43,66]，[44,67]，[45,69]，[46,69]，[47,70]，[48,72]，[ 49,68]，[50,66]，[51,65]，[52,67]，[53,70]，[54,71]，[55,72]，[56,73]，[ [第59,68]，[60,64]，[61,60]，[62,65]，[63,67]，[64,68]，[65,69] ，[66,70]，[67,72]，[68,75]，[69,80]]）; var options = {colors：['＃000000']，图例：'none'，lineSize：2}; var container = document.getElementById（'chart_div'）; var chart = new google.visualization.LineChart（container）; google.visualization.events.addListener（chart，'ready'，function（）{var layout = chart.getChartLayoutInterface（）; for（var i = 0; i< data.getNumberOfRows（）; i ++）{// add image （（i％5）=== 0）{var xPos = layout.getXLocation（data.getValue（i，0））; var yPos = layout.getYLocation（data.getValue（i，1）） ; var whiteHat = container.appendChild（document.createElement（'img'））; whiteHat.src ='http://findicons.com/files/icons/512/star_wars/16/clone_old.png'; whiteHat.className = 'whiteHat'; // 16x16（这个例子中的图片大小）whiteHat.style.top =（yPos  -  16）+'px'; whiteHat.style.left =（xPos）+'px';}}}）; chart.draw（data，options）;}  

.whiteHat {border：none; position：absolute;}

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

I want to line chart looks like below

or just image sequence chart is possible?

like this

is there any possible way for achieving this?

解决方案

use the getChartLayoutInterface method

var layout = chart.getChartLayoutInterface();

to find the (x, y) location of the point

var xPos = layout.getXLocation(data.getValue(row, xColumn));
var yPos = layout.getYLocation(data.getValue(row, yColumn));

then add the image manually and adjust accordingly

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var options = {
    colors: ['#000000'],
    legend: 'none',
    lineSize: 2
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var layout = chart.getChartLayoutInterface();
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      // add image above every fifth element
      if ((i % 5) === 0) {
        var xPos = layout.getXLocation(data.getValue(i, 0));
        var yPos = layout.getYLocation(data.getValue(i, 1));

        var whiteHat = container.appendChild(document.createElement('img'));
        whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
        whiteHat.className = 'whiteHat';

        // 16x16 (image size in this example)
        whiteHat.style.top = (yPos - 16) + 'px';
        whiteHat.style.left = (xPos) + 'px';
      }
    }
  });

  chart.draw(data, options);
}

.whiteHat {
  border: none;
  position: absolute;
}

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

这篇关于如何将图像或图标附加到谷歌折线图的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！