如何将背景图像破解到Google Chart Tools的动态(JavaScript/SVG)图表中？

Question

我正在更新使用Google Image Chart API的旧数据可视化模块.现在,我们将切换到新的(呃)Visualization API,它使用JavaScript在指定的<div>容器中在浏览器中生成动态图表.

我们需要提供带有背景图像的图表(用于品牌推广).但是,鉴于API参考中的配置选项,我唯一能够完成的是更改背景颜色.

如果我将<div>图表嵌入到图表中,那么图表(显然)就会覆盖它.

是否有我或我完全不知道的问题的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'
};