Question

我需要在Google Chart中放置背景图片。我已经看到了建议在父div中包含图表并为父div设置背景图像的解决方案。但是，如果我这样做，那么背景图像也将覆盖图表外部显示轴标签和图例等的区域。我只希望我的图像在图表区域中。

或者，有没有办法检索图表选项，以便我可以使用chartArea.top，chartArea.left，chartArea.width和chartArea.height将图表叠加在正确的位置？

非常感谢，Chris

Answer 1

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

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

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

Answer 2

为了回应Sjoerd的回答，完整的代码可能如下所示：

在Html中，正如jaime在this stack overflow question中建议的那样：

<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 chart's documentation中的示例和我对this stack overflow question

的回答编写的

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

2 个答案: