在图表中设置背景颜色答案

【问题标题】：set background color in chart在图表中设置背景颜色
【发布时间】：2012-02-17 07:28:44
【问题描述】：

我正在使用一个主题，但我想将图表周围的背景颜色设置为白色或透明之类的。

我正在尝试这段代码：

  var myTheme =  dojox.charting.themes.PlotKit.orange;

  myTheme.fill= "white";

  chart10.setTheme(myTheme);


chart10.addPlot("default", {
    type: "Pie", 
    labelOffset: -30,
    radius: 150,
    startAngle: 45,
    font: "normal normal 10pt Tahoma",
    fontColor: "black",
    labelWiring: "grey",
    labelStyle: "columns",
    htmlLabels: true,
    plotarea: { fill: "#000" }
});

但是这段代码不起作用，没有可见的改动。

如何设置颜色背景？

【问题讨论】：

标签： javascript charts dojo dojox.charting

【解决方案1】：

我相信你必须同时设置 chart.fill 和 plotarea.fill 属性。

  myTheme.chart.fill= "white";
  myTheme.plotarea.fill = "white";

如果您执行console.debug(myTheme)，您可以检查主题对象的所有属性。在找到合适的之前，我通常需要进行一些试验。

【讨论】：

【解决方案2】：

我知道这是旧的，但我有一个情况是我正在创建一个饼图并且需要更改饼图背后的背景颜色。我尝试了这个解决方案，但它不起作用，因为我没有分配主题。我是这样创建的：

var pieChart = new Chart("myDIV");
pieChart.addPlot("default", {type: "Pie"});
pieChart.addSeries("Series A", pieString);

我的 pieString 是我将变量组合在一起以形成饼图的地方。基本上，我连接了一系列这样的语句：

{y:200, tooltip: "layer", color:"red", text: "myText"}

我将这些字符串连接在一起并将其分配给我的 pieString 变量。

当我设置图表时，它后面有一个标准的白色背景，这对我的彩色背景效果不佳，因为我希望它混合。有两个矩形构成背景。您可以通过pieChart.fill = "something" 更改较大和最靠后的那个，但内部那个没有改变。

我为我解决这个问题的方式是这样的。

function ClearChartBackground() {
    var sumDivRects = document.getElementById("chartDIV").getElementsByTagName("svg")[0].getElementsByTagName("rect"); //so I am getting the rectangles that are part of my chart div

    var firstRect = sumDivRects[0];
    var secondRect = sumDivRects[1];
    firstRect.attributes.item(1).value = "0";
    secondRect.attributes.item(1).value = "0";
    //this drills down to the 'fill-opacity' attribute that can then be changed to make it transparent


}

正如您在我的照片中看到的那样，原始背景是白色的，这在我的灰色背景上效果不佳。运行我的函数后，它变为透明的。

我发布此内容是因为我让 Dojo 为我渲染它，我花了很长时间才找到如何更改它。我偶然发现了这篇文章，但由于我没有做主题，因此我没有从中得到太多帮助。

【讨论】：

【解决方案3】：

使用 Jquery，您可以执行以下操作：

$("#chartNode svg rect:eq(0)").attr("fill", "0");
$("#chartNode svg rect:eq(0)").attr("fill-opacity", "0");

所以，基本上您是在访问元素并手动更改属性。这不是很有效的方法，但它可以解决问题。

【讨论】：

【解决方案4】：

dojox.charting.themes.Claro.chart.fill = "#F1F1F0"
dojox.charting.themes.Claro.plotarea.fill = "#F1F1F0"
dojox.charting.themes.Claro.chart.stroke = "#F1F1F0"

// Set the theme
chart.setTheme(dojox.charting.themes.Claro);

【讨论】：