Sjoerd の回答に貢献するためだけに、完全なコードは次のようになります。
Html では、jaime がこのスタック オーバーフローの質問で提案したように:
<div id='brand_div'>
<div id='chart_div'></div>
</div>
css では、同じ回答で示唆されているように:
#brand_div{
background: url(<SOME-URL>) no-repeat;
}
JavaScript では、Sjoerd の提案を使用して:
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");
}
このコードはすべて、Google チャートのドキュメントの例と、このスタック オーバーフローの質問に対する私の回答を使用して書かれています。