как наложить линию на диаграмму столбца додзё - PullRequest
Новая
       63

как наложить линию на диаграмму столбца додзё

2 голосов
/ 29 марта 2012

Я использую столбчатую диаграмму додзё. Я хочу добавить пользовательскую линию (своего рода пороговую линию), которая рисуется на графике. Итак, допустим, что ось y находится в диапазоне от 0 до 5. Я хочу горизонтальную линию, скажем, 4.2, пробегающую график. Это столбчатая диаграмма. Я надеялся найти несколько API-интерфейсов для рисования, которые могли бы помочь мне сделать собственное рисование на графике, но я не могу понять, как это сделать. Я знаю, что диаграмма использует gfx и поверхность, так что, если я могу получить ручку к поверхности графика / графика, возможно, я смогу нарисовать собственную линию? Для этого также потребуются данные для отображения координат.

Мой текущий график использует код, подобный: 

var mychart = new dojox.charting.Chart2D("columns").
        addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true,
                            font: "normal normal 10pt Arial", 
                             labels: [{value: 1, text: "Q2 FY11"},
                                      {value: 2, text: "Q3 FY11"},
                                    {value: 3, text: "Q4 FY11"},
                                    {value: 4, text: "Q1 FY12"}]
                            }).
        addAxis("y", {vertical: true, includeZero: false, fixLower: "major", fixUpper: "major", min: 0, max: 5, font: "normal normal 10pt Arial", majorTick: {color: "black", length: 6}, minorTicks: false}).
        addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 5, minBarSize : 14, maxBarSize:24, animate:  { duration: 1000, easing: dojo.fx.easing.linear} }).
        addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]).
        addSeries("Series B", [1.2, 2.5]);

Ответы [ 3 ]

3 голосов
/ 29 марта 2012

Вы можете визуализировать линию, используя другой график. 

new dojox.charting.Chart2D("columns").
    addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true,
                        font: "normal normal 10pt Arial", 
                         labels: [{value: 1, text: "Q2 FY11"},
                                  {value: 2, text: "Q3 FY11"},
                                {value: 3, text: "Q4 FY11"},
                                {value: 4, text: "Q1 FY12"}]
                        }).
    addAxis("y", {vertical: true, includeZero: false, fixLower: "major", fixUpper: "major", min: 0, max: 5, font: "normal normal 10pt Arial", majorTick: {color: "black", length: 6}, minorTicks: false}).
    addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 5, minBarSize : 14, maxBarSize:24, animate:  { duration: 1000, easing: dojo.fx.easing.linear} }).
    addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]).
    addSeries("Series B", [1.2, 2.5]).
    addPlot("threshold", { type: "Lines" }).
    addSeries("threshold", [{x: 0, y: 4.2}, {x: 4, y: 4.2}], { plot: "threshold" }).
    render();
0 голосов
/ 23 июля 2013

Наконец, что не менее важно, вы можете использовать функции рисования gfx для рисования линии вручную, как описано ниже:

Добавление линии (не серии) к диаграмме додзё

0 голосов
/ 19 февраля 2013

Еще один простой пример, представляющий max_te температура в виде линий и Min_tempera в виде столбцов на том же графике: 

var chart = new Chart("chartNode");

chart.addPlot("tempMaxPlot", {
    type: "Lines",
    markers: false
});

chart.addPlot("tempMinPlot", {
    type: "Columns",
    markers: true,
    gap: 5
});

chart.addAxis("x");
chart.addAxis("y", { min: -3, max: 13, vertical: true, fixLower: "minor", fixUpper: "major" });

var chartData_tmax = [11,13,12,11,10,9,9,10];
chart.addSeries("tmax",chartData_tmax, { plot: "tempMaxPlot" });

var chartData_tmin = [1,1,2,1,0,-1,-1,0];
chart.addSeries("tmin",chartData_tmin, { plot: "tempMinPlot" });

chart.render();
...