Диаграммы Dojox: как создать дублирующую ось сверху и снизу?

Вот простая гистограмма с использованием Dojox Charting:

http://jsfiddle.net/y3QQZ/7/

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

Вот код:

var data = [1, 2, 3];

require(
[
    'dojox/charting/Chart',
    'dojox/charting/axis2d/Default',
    'dojox/charting/plot2d/Bars',
    'dojox/charting/themes/Claro',
    'dojo/domReady!'], function (Chart, Default, Bar, theme) {
    var chart = new Chart('chart');
    chart.setTheme(theme);
    chart.addPlot('default', {
        type: Bar,
        gap: 5
    });
    chart.addAxis('x', {
        labels: [{
            value: 1,
            text: 'One'
        }, {
            value: 2,
            text: 'Two'
        }, {
            value: 3,
            text: 'Three'
        }],
        vertical: true,
        minorTicks: true,
        majorTick: {
            length: 5
        },
        minorTick: {
            length: 5
        }
    });
    chart.addAxis('y', {
        min: 0,
        minorTicks: true,
        majorTick: {
            length: 5
        },
        minorTick: {
            length: 5
        }
    });
    chart.addSeries('Bar', data);
    chart.render();
});

bar-chart dojox.charting
person Jeremy    schedule 26.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, вы, возможно, перепутали свои оси X и Y, но способ сделать это — добавить еще один график. Если я правильно помню, в Dojo каждый график может иметь только одну ось h (горизонтальную) и одну ось v (вертикальную). Своего рода хакерский способ сделать это, выполнив следующие действия:

Добавьте еще одну ось со свойством leftBottom, установленным в false:

chart.addAxis('y2', {
    min: 0,
    minorTicks: true,
    leftBottom: false,
    majorTick: {
        length: 5
    },
    minorTick: {
        length: 5
    }
});

Обратите внимание, что я просто называю его y2, потому что ваша исходная ось x называется «y». Затем я бы изменил ваш исходный график и добавил еще один график, чтобы было две ссылки на горизонтальные оси.

chart.addPlot('default', {
    type: Bar,
    gap: 5,
    hAxis: 'y',
    vAxis: 'x'
});
    chart.addPlot('default2', {
    type: Bar,
    gap: 5,
    hAxis: 'y2',
    vAxis: 'x'
});

Затем, наконец, добавление двух серий:

chart.addSeries('Bar', data);
chart.addSeries('Bar2', data, {plot: "default2"});

Я взял вашу скрипку и изменил ее, чтобы она работала здесь: http://jsfiddle.net/U7tmT/

Это кажется немного хакерским, поэтому другое предложение будет заключаться в том, что если бы вы могли заранее определить минимальную и максимальную ось для своей горизонтальной оси, то вам не нужен повторяющийся ряд, а только дополнительный график. Пример здесь: http://jsfiddle.net/U95cA/

person Richard    schedule 27.03.2014
comment
Спасибо за вашу помощь. Это именно то, что я искал. Вы правы - я перепутал оси x и y. - person Jeremy; 28.03.2014