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

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

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

非常感谢，克里斯

来源

2012-12-28 ChrisFox

您可以添加另一个孩子DIV父DIV和设置它的利润率也写。至于图表区域尺寸，我不知道它们是否有属性，但是您可以找到必要的html元素并获得它的位置。 – vorrtex

你可以了解您的图表以下方式得出的信息：

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

然后，您可以使用这些信息来绘制的正确位置上一个div。

来源

2012-12-28 11:16:08 Sjoerd

谢谢@Sjoerd。我最终设法使用您建议的方法在父div中放置背景图像。对于其他人想要做到这一点，这里是我的解决方案的样子。 'var boundingBox = chart.getChartLayoutInterface（）。getChartAreaBoundingBox（）; （'＃backgroundBackground'）。css（'background-position'，boundingBox.left +“px”+ boundingBox.top +“px”）。css（'background-size'，boundingBox.width +“px”+ boundingBox.height +“px”）;' – ChrisFox

@ChrisFox你能用解决方案而不是在这里更新你的问题吗？ – BrOSs

@Sjoerd请让我们知道getChartLayoutInterface（）如何工作？似乎没有任何文件。 – jmac

只是为了促进Sjoerd的答案，完整的代码可以是这样的：

在HTML中，如海梅在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

来源

2016-12-07 16:13:26 caspillaga

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

回答

相关问题