javascript - color - title css

establecer el color de fondo en el gráfico

Question

Estoy usando un tema, pero quiero establecer el color de fondo alrededor del gráfico en blanco o transparente o algo así.

Estoy intentando este código:

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

Pero este código no funcionó, ninguna alteración es visible.

¿Cómo puedo configurar el fondo de color?

Answer 1

Creo que debes establecer las propiedades chart.fill y plotarea.fill.

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

Si hace console.debug(myTheme) , puede inspeccionar todas las propiedades del objeto de tema. Usualmente tengo que experimentar un poco antes de encontrar los correctos.

Answer 2

Sé que esto es viejo, pero tenía una situación en la que estaba creando un gráfico circular y necesitaba cambiar el color de fondo detrás del gráfico circular. Intenté esta solución, pero no funcionó porque no estaba asignando un tema. Lo estoy creando de esta manera:

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

Mi pieString es donde estoy combinando mis variables para formar el pastel. Básicamente, concateno una serie de declaraciones como esta:

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

Uniré esas cadenas y las asignaré a mi variable pieString.

Cuando configuré mi gráfico, obtuve un fondo blanco estándar detrás de él, que no funciona bien para mi fondo de color, ya que quería que se mezclara. Hay dos rectángulos que componen el fondo. Puede cambiar el más grande y más atrás a través de pieChart.fill = "something" , pero el interno no cambió.

La forma en que resolví esto para mí es así.

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


}

Como puede ver en mi foto, el fondo original era blanco, lo cual no funciona bien en mi fondo gris. Después de ejecutar mi función, se cambia a transparente.

Estoy publicando esto porque me llevó bastante tiempo descubrir cómo cambiar esto, ya que Dojo lo está renderizando para mí. Encontré esta publicación, pero no obtuve mucha ayuda porque no estaba haciendo un tema.

Answer 3

Usando Jquery, puedes hacer algo como esto:

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

Entonces, básicamente estás accediendo al elemento y cambiando el atributo manualmente. No es una forma muy eficiente de hacerlo, pero hará el truco.

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