5

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

我正在尝试这段代码：

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

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

如何设置颜色背景？

在此处输入图像描述

4

4 回答 4

8

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

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

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

于 2012-01-24T13:10:14.723 回答
1

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

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 为我渲染它，我花了很长时间才找到如何更改它。我遇到了这篇文章，但由于我没有做主题，因此我没有从中得到太多帮助。

这是我显示差异的坏剪辑

于 2014-07-24T17:28:22.033 回答
0 
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);
于 2016-12-28T13:33:36.353 回答
-2

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

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

因此，基本上您正在访问元素并手动更改属性。这不是很有效的方法，但它会成功。

于 2016-05-06T16:18:43.507 回答