How to place an image background in a google chart

问题:

I need to place a background image in a Google Chart. I've seen solutions which suggest including the chart in a parent div and setting a background image for the parent div. However, if I do that then the background image will also cover the area outside the chart where the axis labels and legend, etc are displayed. I want my image in the chart area itself only.

Alternatively, is there any way to retrieve the chart options so that I could use chartArea.top, chartArea.left, chartArea.width and chartArea.height to overlay an image on the chart in the correct place?

Many thanks, Chris

回答1:

You can get information about where your chart is drawn in the following manner:

var graph = new google.visualization.LineChart(...);
graph.draw(data, ...);
var boundingBox = graph.getChartLayoutInterface().getChartAreaBoundingBox();
var pixelsFromLeft = boundingBox.left;

You can then use this information to draw a div on the correct position.

回答2:

Just to contribute to Sjoerd's answer, the full code can look like this:

In Html, as jaime suggested in this stack overflow question:

<div id='brand_div'>
    <div id='chart_div'></div>
</div>

In css, as suggested in the same answer:

#brand_div{ 
    background: url(<SOME-URL>) no-repeat;
}

In javascript, using Sjoerd's suggestion:

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['ID', 'X', 'Y', 'Temperature'],
     ['',   80,  167,      120],
     ['',   79,  136,      130],
     ['',   78,  184,      50],
     ['',   72,  278,      230],
     ['',   81,  200,      210],
     ['',   72,  170,      100],
     ['',   68,  477,      80]
   ]);

   var options = {
     colorAxis: {colors: ['yellow', 'red']},
     width: 450,
     height: 300,
     title: 'My Daily Activities',
     backgroundColor: 'none' // this is important!
   };

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

   // this two lines are the ones that do the magic
   var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox(); 
   $('#brand_div').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
}

All this code was also written using the example in google chart's documentation and my answer to this stack overflow question