Imposta il colore di sfondo nel grafico

Question

Sto usando un tema, ma voglio impostare il colore di sfondo attorno al grafico su bianco o trasparente o qualcosa del genere.

Sto provando questo codice:

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

Ma questo codice non funzionava, nessuna modifica è visibile.

Come posso impostare lo sfondo del colore?

Answer 1

Credo che tu debba impostare le proprietà di Chart.Fill e Plotrea.Fill.

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

Se fate console.debug(myTheme) Puoi ispezionare tutte le proprietà dell'oggetto tema. Di solito devo sperimentare un po 'prima di trovare quelli giusti.

Answer 2

So che è vecchio, ma avevo una situazione in cui stavo creando un grafico a torta e dovevo cambiare il colore di sfondo dietro il grafico a torta. Ho provato questa soluzione, ma non ha funzionato perché non stavo assegnando un tema. Lo sto creando in questo modo:

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

Il mio piestring è dove sto combinando le mie variabili insieme per formare la torta. Fondamentalmente, concatenerò una serie di dichiarazioni come questa:

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

Mi unisco a quelle corde e le assegno alla mia variabile Piestring.

Quando ho impostato il mio grafico, ho avuto uno sfondo bianco standard dietro di esso, che non funziona bene per il mio sfondo colorato poiché volevo che si fondesse. Ci sono due rettangoli che compongono lo sfondo. Puoi cambiare il più grande e più lontano pieChart.fill = "something", ma quello interiore non è cambiato.

Il modo in cui ho risolto questo per me è così.

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


}

Come puoi vedere nella mia foto, lo sfondo originale era bianco, che non funziona bene sul mio sfondo grigio. Dopo aver eseguito la mia funzione, viene modificato in trasparente.

Sto pubblicando questo perché mi ci è voluto molto tempo per scoprire come cambiarlo dal momento che ho dojo renderlo per me. Mi sono imbattuto in questo post, ma non ne ho ricevuto molto aiuto dato che non stavo facendo un tema.

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

Usando jQuery, puoi fare qualcosa del genere:

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

Quindi, fondamentalmente stai accedendo all'elemento e modificando manualmente l'attributo. Non è un modo molto efficiente di fare con, ma farà il trucco.