在 rCharts/slidify/nvd3 中设置图表区域背景颜色答案

【问题标题】：Set chart area background color in rCharts/slidify/nvd3在 rCharts/slidify/nvd3 中设置图表区域背景颜色
【发布时间】：2014-01-12 23:04:28
【问题描述】：

对于下面的滑动卡组，

---
title       : Foo
framework   : revealjs        # {io2012, html5slides, shower, dzslides, ...}
revealjs    : {theme: solarized}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      # 
widgets     : []            # {mathjax, quiz, bootstrap}
mode        : selfcontained # {standalone, draft}
ext_widgets : [libraries/nvd3]
---
## NVD3 Plot Iframe
```{r nvd3plot2, results = 'asis', comment = NA, message = F, echo = F} 
require(rCharts)
n1 <- nPlot(mpg ~ wt, data = mtcars, type = 'scatterChart')
n1
```

我想将图表的背景颜色设置为白色。

如果我编织它然后编辑生成的figure/nvd3plot2.html 中的<style> 块以添加background-color: white;，我可以做到这一点：

<style>
.rChart {
  display: block;
  margin-left: auto; 
  margin-right: auto;
  width: 800px;
  height: 400px;
  background-color: white;
}  
</style>

如何从 .Rmd 文件执行此操作？

【问题讨论】：

默认背景为白色。有什么理由要将其显式设置为白色？
当我在 Firefox 26.0 下将它与revealjs 一起使用时，图表以revealjs 幻灯片背景颜色作为背景呈现，而不是白色。这意味着如果我将图表放在具有深色主题的revealjs 卡组上（例如默认主题：从上面的卡组中删除revealjs : {theme: solarized}），我看不到图表，因为它是黑线在深色背景上。
我刚刚在 Chrome 31.0 下进行了检查，得到了同样的结果：默认情况下，在revealjs 面板中，图表不会以白色背景呈现。我必须手动添加 background-color: white 才能获得这种行为。
我应该提到：我正在使用 slidify 和 rcharts 和 slidifyLibraries 的 dev 分支。
快速解决方法是将以下内容添加到您的 Rmd 文件 <style>iframe{background-color: white}</style>。就个人而言，我更喜欢透明背景，以便情节融入幻灯片。

标签： css nvd3.js rcharts slidify

【解决方案1】：

正如我的评论中所指出的，获得白色背景的快速解决方法是将以下行添加到您的 Rmd 文件中

<style>iframe{background-color: white}</style>

【讨论】：