在柱形图中移动绘图（dojo）

Question

我正在尝试创建一个既包含实际数据又包含实际数据目标的图表。我试图在真实数据条后面显示目标数据条，并将目标数据图略微向左移动。

像这样：

我试图移动整个情节，但我无法弄清楚如何。我还认为，如果我添加了一个不同的y轴，我可能会将轴向左移动或减小轴和图之间的间隙，但是我无法从我的互联网搜索中找到任何结果（所有结果似乎都显示.setAxisWindow（ ）我知道它是用于平移但有没有办法可以使用它？）。

这是我目前的脚本：

function setupChart(Chart, theme, Columns, Highlight)
{
    var realData = [2.50,3.45,1.22,1.86,2.54, 4.01, {y:3.10, color : 'green'}];
    var targetData = [2.00,2.00,2.00,2.86,2.54, 2.00, 2.00];

    var chart = new Chart("weekElectricBar", {title: 'Daily Heating Cost',  titleGap: 0, titleFont: 'bold normal normal 15px Tahoma',  titleFontColor: "black"});

    chart.setTheme(theme);

    chart.addPlot("default", {
        type: "Columns",
        markers: true,
        gap: 5,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });

     chart.addPlot("back", {
        type: "Columns",
        vAxis: "other y",
        markers: true,
        gap: 5,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });
    chart.addAxis("other y", { type : 'Invisible', includeZero: true, fixUpper: 'major', vertical: true, min: 0, max:5});

    chart.addAxis("y", {includeZero: true, fixUpper: 'major', vertical: true,  min: 0, max:5, labels: [{value: 0, text: "£0"}, {value: 1, text: "£1"}, {value: 2, text: "£2"}, {value: 3, text: "£3"}, {value: 4, text: "£4"}, {value: 5, text: "£5"}] });
    chart.addAxis("x", {labels: [{value: 1, text: "Wed"}, {value: 2, text: "Thurs"}, {value: 3, text: "Fri"}, {value: 4, text: "Sat"}, {value: 5, text: "Sun"}, {value: 6, text: "Mon"}, {value: 7, text: "Last 24 Hrs"}]});

    chart.addSeries("realData",realData, {plot: "back"});
    chart.addSeries("targetData",targetData);

    chart.render();
}

或者，是否可以仅为一列增加'gap'属性？另一种看待它的方法是使用聚簇列，然后减少聚类列之间的差距 - 但我认为这不可能。

Answer 1

似乎没有办法做到这一点所以我正在使用作弊来实现这种效果。它的工作原理是添加一个普通列的图（首先添加）和一个聚簇列图（其中一个序列全部为0）。所有列的宽度都设置为相等。

这就是我现在所拥有的：

function setupWeekElectricBar(Chart, theme, ClusteredColumns, Columns)
{
    var realData = [2.50,3.45,1.22,1.86,2.54, 4.01, {y:3.10, color: 'green'}]; // a new array
    var blankData = [0,0,0,0,0]; // a new array

    var targetData = [2.00,2.00,2.00,2.86,2.54, 2.00, 2.00];

    var chart = new Chart("weekElectricBar", {title: 'Daily Heating Cost',  titleGap: 0, titleFont: 'bold normal normal 15px Tahoma',  titleFontColor: "black"});

    chart.setTheme(theme);

     chart.addPlot("default", {
        type: ClusteredColumns,
        markers: true,
        gap: 5,
        minBarSize : 40,
        maxBarSize : 40,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });

    chart.addPlot("back", {
        type: Columns,
        markers: true,
        gap: 5,
        minBarSize : 40,
        maxBarSize : 40,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });

    chart.addAxis("y", {includeZero: true, fixUpper: 'major', vertical: true, min: 0, max:5, labels: [{value: 0, text: "£0"}, {value: 1, text: "£1"}, {value: 2, text: "£2"}, {value: 3, text: "£3"}, {value: 4, text: "£4"}, {value: 5, text: "£5"}] });
    chart.addAxis("x", {labels: [{value: 1, text: "Wed"}, {value: 2, text: "Thurs"}, {value: 3, text: "Fri"}, {value: 4, text: "Sat"}, {value: 5, text: "Sun"}, {value: 6, text: "Mon"}, {value: 7, text: "Last 24 Hrs"}]});

    chart.addSeries("blankData",blankData, {width: 2});
    chart.addSeries("realData",realData);
    chart.addSeries("targetData",targetData, {plot:'back'});

    chart.render();
}