Как установить отдельные цвета гистограммы для каждого столбца?

Я создаю столбчатую диаграмму в Dojo 1.4 и хочу раскрасить отдельные столбцы на основе значения, которое оно представляет, связанного с пороговым значением. Например, если значение столбца равно 5 или меньше, оно должно быть зеленой заливкой. Если это 10 или больше, это должна быть красная заливка.

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

Вот код, сгенерированный моим приложением до сих пор:

var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Columns", gap:5});
chart1.addPlot("target", {type: "Lines"});
chart1.addAxis("x",
    {labels: [{value: 1, text: "Aug '12"},
    {value: 2, text: "Sep '12"},
    {value: 3, text: "Oct '12"},
    {value: 4, text: "Nov '12"},
    {value: 5, text: "Dec '12"},
    {value: 6, text: "Jan '13"}],
    minorTicks:false});
chart1.addAxis("y", {vertical: true, min: 0, max: 9});
chart1.addSeries("Data Series", [6.9,7.7,1,5.5,7.6,8.1]);
chart1.addSeries("Target Series", [6,6,6,6,6,6], {plot:"target"});

chart1.render();

Я хотел бы, чтобы отдельные точки в «Серии данных» имели переменные значения цвета.


javascript dojox.charting
person huntmaster    schedule 27.02.2013    source источник
comment
Было бы полезно, если бы вы опубликовали пример кода.   -  person Aaron Kurtzhals    schedule 27.02.2013
comment
Просто добавил пример кода, чтобы обеспечить контекст.   -  person huntmaster    schedule 27.02.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это, используя «StackedColumns». Идея состоит в том, что вы можете создать одну серию для каждого цвета. Например, «зеленая» серия для значений ‹=5, другая для значений >5 и ‹=10 и «красная» для значений >10.

Затем вы должны оценить каждое значение в массиве, в котором у вас есть данные, и поместить это значение в соответствующую серию, например:

 for(var i=0; i<chartData.length;i++){
        if(chartData[i]<=5)
            fill("green",chartData[i]);
        else if(chartData[i]>5 && chartData[i]<=10)
            fill("yellow",chartData[i]);
        else
            fill("red",chartData[i]);
    }

См. этот jsfiddle, чтобы увидеть пример, работающий с использованием dojo.

person Noelia    schedule 23.04.2013
comment
Это отлично решает проблему, большое спасибо за демонстрацию jsfiddle! - person huntmaster; 23.04.2013