在Google Line图表中的行注释之上添加图像

时间:2017-02-01 11:29:31

标签: javascript charts google-visualization

以下是创建折线图的代码。我试图在行注释的顶部添加图像。这是jsfiddle的演示。 这是代码:

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

function drawBasic() {

      var data = new google.visualization.DataTable();

      data.addColumn('number', 'X');
      data.addColumn({type: 'string', role: 'annotation'});
      data.addColumn('number', 'Dogs');
      data.addColumn('number', 'Cats');

      data.addRows([
        [0,null, 0, 1],   [1,'', 10,3],  [2,null, 23,6],  [3,null, 17,7],  [4,null, 18,4],  [5,null, 9,7]
      ]);

      var options = {
        curveType : 'function',
        hAxis: {
          title: 'Time',
          gridlines: {
              color: 'transparent'
          }
        },
        vAxis: {
          title: 'Popularity',
          gridlines: {
              color: 'transparent'
          }
        },
        annotations: {
            style: 'line',
            position: 'top'
        }
      };

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

      chart.draw(data, options);
    }

我真的无法弄清楚如何做到这一点。有人做过这个吗?

2 个答案:

答案 0 :(得分:1)

一旦'ready'事件触发,您就可以向图表中添加元素 (或'animationfinish'使用动画时)

首先,需要找到注释,这将是<rect>个元素

与轴线类似,它们将'width' 1

但他们会有不同的'fill'属性 (请记住这一点,如果在annotations选项上设置了更多样式设置)

以下工作代码段找到注释行并将图像添加到顶部

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', 'Dogs');
  data.addColumn('number', 'Cats');
  data.addRows([
    [0, null, 0, 1],
    [1, '', 10, 3],
    [2, null, 23, 6],
    [3, null, 17, 7],
    [4, null, 18, 4],
    [5, null, 9, 7]
  ]);

  var options = {
    annotations: {
      position: 'top',
      style: 'line'
    },
    hAxis: {
      gridlines: {
        color: 'transparent'
      },
      title: 'Time'
    },
    vAxis: {
      gridlines: {
        color: 'transparent'
      },
      title: 'Popularity'
    },
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
      if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) {
        var xPos = parseFloat(rect.getAttribute('x'));
        var yPos = parseFloat(rect.getAttribute('y'));

        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 - 8) + '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>

答案 1 :(得分:0)

'role': 'tooltip', 'p': {'html': true}});your data.addColumn中添加optionstooltip: { isHtml: true }中使用:<div id="chart"></div>

HTML:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'y');
    data.addColumn('number', 'Line 1');
    data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    data.addColumn('number', 'Line 2');       

    data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]);
    data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]);
    data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]);
    data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]);
    data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]);

    var options = {
        title: 'Graph',
         hAxis: {
          title: 'Time',
          gridlines: {
              color: 'transparent'
          }
        },
        vAxis: {
          title: 'Popularity',
          gridlines: {
              color: 'transparent'
          }
        },
        annotations: {
            style: 'line',
            position: 'top'
        },
        tooltip: {isHtml: true},
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

google.load("visualization", "1", {
    packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

JavaScript的:

(?i)(\b\w+\b)(\s+\1\b)+

JsFiddle