기둥 형 차트 (도장)에서 플롯 이동

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(); 
} 

, 그냥 하나의 열에 대한 '차이'속성을 증가 할 수 있습니다

이

내가 현재 가지고있는 스크립트입니다? 클러스터 된 열을 사용하고 클러스터 된 열 사이의 간격을 줄이는 것도 또 다른 방법입니다. 그러나 가능하다고 생각하지는 않습니다.

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(); 
}