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

问题描述

我想要折线图如下图

或者只是图像序列图是可能的?

or just image sequence chart is possible?

喜欢这个

有什么可能的方法来实现这一点吗?

is there any possible way for achieving this?

推荐答案

使用 getChartLayoutInterface 方法

var layout = chart.getChartLayoutInterface();

找到(x,y)点的位置

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