Charts 如何在谷歌图表中放置图像背景

我需要在谷歌图表中放置背景图像。我见过一些建议将图表包含在父div中并为父div设置背景图像的解决方案。但是，如果我这样做，则背景图像也将覆盖图表外部显示轴标签和图例等的区域。我只希望我的图像在图表区本身

或者，是否有任何方法检索图表选项，以便我可以使用chartArea.top、chartArea.left、chartArea.width和chartArea.height将图像覆盖在图表的正确位置

---

非常感谢，Chris

您可以通过以下方式获得有关图表绘制位置的信息：

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

---

然后可以使用此信息在正确的位置绘制div

为了帮助Sjoerd给出答案，完整的代码可以如下所示：

在Html中，正如jaime在中所建议的：

---

所有这些代码都是使用中的示例和我的答案编写的

您可以将另一个子div添加到父div并设置其边距。至于图表区域尺寸，我不知道它们是否有属性，但是你可以找到一个必要的html元素并得到它的位置。谢谢@Sjoerd。我最终设法使用了您建议的方法，在父div中放置了一个背景图像<代码>变量边界框=chart.getChartLayoutInterface（）.getChartAreaBoundingBox（）$（“#chartBackground”）.css（'background-position'，boundingBox.left+“px”+boundingBox.top+“px”）.css（'background-size'，boundingBox.width+“px”+boundingBox.height+“px”）@ChrisFox您能用解决方案更新您的问题而不是在这里吗？@Sjoerd您能告诉我们getChartLayoutInterface（）的工作原理吗？似乎没有任何文档。

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

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

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");
}