Переместить график в столбце диаграммы (додзё) - PullRequest
Новая
       12

Переместить график в столбце диаграммы (додзё)

0 голосов
/ 10 марта 2012

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

Примерно так:

enter image description here

Я пытался переместить весь сюжет, но не мог понять, как.Я также подумал, что, если бы я добавил другую ось 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();
}

В качестве альтернативы, можно ли увеличитьсвойство «пробел» только для одного столбца?Другой способ взглянуть на это - использовать кластеризованные столбцы, а затем уменьшить разрыв между кластеризованными столбцами, но я не думаю, что это возможно.

1 Ответ

0 голосов
/ 25 июня 2012

Похоже, что это невозможно, поэтому я использую чит, который достигает этого эффекта. Он работает путем добавления графика нормальных столбцов (который добавляется первым) и графика кластеризованных столбцов (где все серии равны 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();
}
...