0

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

或者，有什么方法可以检索图表选项，以便我可以使用 chartArea.top、chartArea.left、chartArea.width 和 chartArea.height 在图表上的正确位置叠加图像？

非常感谢，克里斯

4

2 回答 2

1

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

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

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

于 2012-12-28T11:16:08.043 回答
0

只是为了对 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");
}

所有这些代码也是使用谷歌图表文档中的示例和我对这个堆栈溢出问题的回答编写的

于 2016-12-07T16:13:26.880 回答