установить цвет фона на графике - PullRequest
Новая
       58

установить цвет фона на графике

5 голосов
/ 24 января 2012

Я использую тему, но я хочу установить цвет фона вокруг диаграммы на белый или прозрачный или что-то еще.

Я пытаюсь этот код: 

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

Но этот кодне работает, никаких изменений не видно.

Как установить цвет фона?

enter image description here

Ответы [ 4 ]

8 голосов
/ 24 января 2012

Я считаю, что вы должны установить оба свойства chart.fill и plotarea.fill. 

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

Если вы сделаете console.debug(myTheme), вы можете проверить все свойства объекта темы.Обычно мне нужно немного поэкспериментировать, прежде чем я найду нужные.

1 голос
/ 24 июля 2014

Я знаю, что это старый, но у меня была ситуация, когда я создавал круговую диаграмму, и мне нужно было изменить цвет фона позади круговой диаграммы.Я попробовал это решение, но оно не сработало, потому что я не назначал тему.Я создаю это так: 

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, отрисовывающее это для меня.Я наткнулся на этот пост, но мне не очень помогли, так как я не делал темы.

This is my bad clip showing the difference

0 голосов
/ 28 декабря 2016 
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);
0 голосов
/ 06 мая 2016

Используя Jquery, вы можете сделать что-то вроде этого: 

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

Итак, в основном вы обращаетесь к элементу и меняете атрибут вручную.Это не очень эффективный способ, но он поможет.

...