Question

这是一个使用Dojox Charting的简单条形图：

请注意，在图表的底部，有一个数字为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();
});

Answer 1

我认为你可能混淆了你的x和y轴但是这样做的方法是添加另一个图。如果我在Dojo中记得正确，每个绘图只能有一个hAxis（水平）和一个vAxis（垂直）。一种hacky方法是通过执行以下操作：

添加另一个属性leftBottom设置为false的轴：

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

请注意，我只是将其称为y2，因为您的原始x轴被称为＆＃39; y＆＃39;。然后我会修改你的原始绘图并添加另一个绘图，以便有两个对水平轴的引用。

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/

这看起来确实有点hacky，但另一个建议是，如果你可以提前计算水平轴的最小轴和最大轴，那么你不需要复制系列，只需要额外的图。这里有一个例子：http://jsfiddle.net/U95cA/

Dojox图表：如何在顶部和底部创建重复的轴？

1 个答案: