如何将背景图像破解到 Google 图表工具中？动态（JavaScript/SVG）图表？

Question

我正在更新一个使用 Google Image Chart API 的旧数据可视化模块。现在，我们将切换到新的可视化 API< /a>，它使用 JavaScript 在浏览器中指定的

容器内生成动态图表。

我们需要为图表提供背景图像（用于品牌推广目的）。然而，鉴于API参考中的配置选项，是改变背景颜色。

如果我将背景图像嵌入到绘制图表的

中，则图表（显然）只会覆盖它。

是否有我完全不知道的 JavaScript 或 HTML5 解决方案可以解决我的问题？

（我对 JavaScript 有点陌生，感谢您忍受这个实际上可能是微不足道的——或者显然不可能的——问题！）

Answer 1

您可能希望用另一个图表的目标元素包裹图表的目标元素，并将父级的背景更改为您想要的图像，同时删除子级的背景。

例如，HTML

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

和 CSS

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

当然，在 JavaScript 中的图表选项中，

var options = {
    ...
    backgroundColor: 'none'
};

我在这里放了一个示例 http://jsfiddle.net/jaimem/jaxfz /

Answer 2

以防万一有人遇到和我一样的问题，您也可以仅修复图表的背景，而不是整个 div（这会将背景添加到标题、轴等），

您可以执行以下操作：

在 Html 中，正如 jaime 建议的那样：

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

在 css 中，正如 jaime 建议的那样：

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

在 javascript 中：

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

所有这些代码都是使用 jaime 的建议编写的，Google 图表文档 以及 此堆栈溢出问题