如何将背景图像转换为Google Chart Tools的动态（JavaScript / SVG）图表？ [英] How can I hack a background image into Google Chart Tools' dynamic (JavaScript/SVG) chart?

问题描述

我正在更新旧版数据可视化模块，该模块使用了 Google图表API API 。现在，我们切换到新的（或者）Visualization API ，它在指定的< div> 容器中使用JavaScript在浏览器中生成动态图表。

我们需要为图表呈现背景图片（出于品牌目的）。不过，我已经能够完成的唯一一件事情是，只要 API参考中的配置选项是更改背景颜色。

如果我将背景图像嵌入< div> 图表被绘制到图表中，显然，图表覆盖了它。

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

（我对JavaScript有点新，感谢您承担什么可能实际上是一个微不足道的 - 或者显然不可能 - 问题！）

解决方案

您可能想要将图表的目标元素换成另一个，然后更改父母的背景到你想要的图片，同时消除了孩子的背景。

例如，

 < 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/

I'm updating an older data visualization module which used the Google Image Chart API. Now, we're switching to the new(er) Visualization API, which uses JavaScript to generate dynamic charts in the browser, within a specified <div> container.

We have a need to present the chart with a background image (for branding purposes). However, the only thing I've been able to accomplish, given the configuration options in API reference, is to change the background colour.

If I embed a background image into the <div> the Chart is drawn into, the chart (obviously) just overlays it.

Is there a JavaScript or HTML5 solution to my problem that I'm totally unaware of?

(I'm somewhat new to JavaScript, to thank you for bearing with what may actually be a trivial -- or clearly impossible -- problem!)

解决方案

You might want to wrap your chart's target element with another one and change the parent's background to the image you want, while removing the background of the child.

for example, HTML

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

and CSS

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

And of course in your chart options in JavaScript

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

I put an example here http://jsfiddle.net/jaimem/jaxfz/

这篇关于如何将背景图像转换为Google Chart Tools的动态（JavaScript / SVG）图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！