在图表中设置背景颜色

Question

我正在使用主题，但我想将图表周围的背景颜色设置为白色或透明或其他东西。

我正在尝试这段代码：

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

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

如何设置颜色背景？

Answer 1

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

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

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

Answer 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为我渲染它。我遇到过这篇文章，但由于我没有做主题，所以我得不到多少帮助。

Answer 3

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

Answer 4

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

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

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