définir la couleur d'arrière-plan dans le graphique

Question

J'utilise un thème, mais je souhaite définir la couleur d'arrière-plan autour du graphique sur blanc ou transparent ou quelque chose du genre.

J'essaye ce code :

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

Mais ce code n'a pas fonctionné, aucune altération n'est visible.

Comment puis-je définir la couleur du fond ?

Answer 1

Je pense que vous devez définir à la fois les propriétés chart.fill et plotarea.fill.

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

Si tu fais console.debug(myTheme) vous pouvez inspecter toutes les propriétés de l’objet thème.Je dois généralement expérimenter un peu avant de trouver les bons.

Answer 2

Je sais que c'est vieux, mais j'ai eu une situation où je créais un diagramme circulaire et je devais changer la couleur d'arrière-plan derrière le diagramme circulaire.J'ai essayé cette solution, mais elle n'a pas fonctionné car je n'attribuais pas de thème.Je le crée de cette façon:

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

Mon pieString est l’endroit où je combine mes variables pour former le gâteau.Fondamentalement, je concatène une série d'instructions comme celle-ci :

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

Je joins ces chaînes et les attribue à ma variable pieString.

Lorsque j'ai configuré mon graphique, j'ai obtenu un fond blanc standard derrière, ce qui ne fonctionne pas bien pour mon arrière-plan coloré car je voulais qu'il se mélange.Il y a deux rectangles qui composent l'arrière-plan.Vous pouvez changer le plus grand et le plus en arrière en passant par pieChart.fill = "something", mais l'intérieur n'a pas changé.

La façon dont j'ai résolu ce problème pour moi est la suivante.

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


}

Comme vous pouvez le voir sur ma photo, le fond d'origine était blanc, ce qui ne fonctionne pas bien sur mon fond gris.Après avoir exécuté ma fonction, elle devient transparente.

Je poste ceci parce qu'il m'a fallu beaucoup de temps pour savoir comment changer cela puisque je demande à Dojo de me le rendre.Je suis tombé sur ce post, mais je n'en ai pas reçu beaucoup d'aide puisque je ne faisais pas de thème.

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

Utiliser jQuery, vous pouvez faire quelque chose comme ceci:

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

Donc, fondamentalement, vous accédez à l'élément et changeez l'attribut manuellement.Ce n'est pas un moyen très efficace de faire, mais cela fera le tour.