Chart.js 막대 차트의 여러 막대 너비

Question

다른 데이터 세트에 대해 다른 막대 너비를 사용할 수 있습니까? 하나의 스택에 몇 개의 데이터 세트가 있고 자체 스택에 다른 데이터 세트가 있습니다. 단일 데이터 집합은 다른 스택보다 좁아야합니다.

Example. 여기에서는 왼쪽 스택을 복제하여 오른쪽 스택의 두 배가되는 결과를 얻었습니다. 이 제로가 아닌 국경

var data = { 
    labels: ["1", "2", "3", "4", "5"], 
    datasets: [ 
    { 
     label: "d1", 
     backgroundColor: "rgba(182,127,0,1)", 
     borderColor: "rgba(117,61,41,1)", 
     borderWidth: 1, 
     data: [42, 78, 64, 90, 97], 
     stack: "s1" 
    }, 
    { 
     label: "d2", 
     backgroundColor: "rgba(71,161,65,1)", 
     borderColor: "rgba(36,93,56,1)", 
     borderWidth: 1, 
     data: [27, 63, 46, 64, 43], 
     stack: "s1" 
    }, 
    { 
     label: "d3", 
     backgroundColor: "rgba(255,141,106,1)", 
     borderColor: "rgba(99,60,32,1)", 
     borderWidth: 1, 
     data: [18, 50, 23, 83, 35], 
     stack: "s1" 
    }, 
    { 
     label: "d1", 
     backgroundColor: "rgba(182,127,0,1)", 
     borderColor: "rgba(117,61,41,1)", 
     borderWidth: 1, 
     data: [42, 78, 64, 90, 97], 
     stack: "s1b" 
    }, 
    { 
     label: "d2", 
     backgroundColor: "rgba(71,161,65,1)", 
     borderColor: "rgba(36,93,56,1)", 
     borderWidth: 1, 
     data: [27, 63, 46, 64, 43], 
     stack: "s1b" 
    }, 
    { 
     label: "d3", 
     backgroundColor: "rgba(255,141,106,1)", 
     borderColor: "rgba(99,60,32,1)", 
     borderWidth: 1, 
     data: [18, 50, 23, 83, 35], 
     stack: "s1b" 
    }, 
    { 
     label: "d4", 
     backgroundColor: "rgba(160,160,160,1)", 
     borderColor: "rgba(60,60,60,1)", 
     borderWidth: 1, 
     data: [152, 141, 170, 194, 128], 
     stack: "s2", 
     barPercentage: 0.3 
    } 
    ] 
}; 
var options = { 
    scales: { 
    xAxes: [{ 
     categoryPercentage: 0.6, 
     barPercentage: 1 
    }] 
    }, 
    legend: { 
    display: false 
    } 
}; 

var barChart = new Chart($("#myChart"), { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

Answer 1

실제로 이것은 chart.js에서 가능하지만 해결책은 조금 hackish입니다. 요점은 두 번째 x 축 배율을 만들고 barThickness 속성을 다른 축보다 작은 값으로 설정할 수 있다는 것입니다. 그런 다음 데이터 세트를이 액세스에 할당하고 마지막으로 축척 표시를 false로 설정합니다.

하나의 축에 일부 데이터 세트가 있고 다른 숨겨진 축에 다른 데이터 세트가 있습니다. 그 밖의 모든 기능은 여전히 ​​작동합니다 (질문에서 언급 한 것과 같은 효과가 없습니다).

다음은 옵션의 모양입니다.

var options = { 
    scales: { 
    xAxes: [{ 
     categoryPercentage: 0.6, 
     barPercentage: 1, 
    }, { 
     id: 'x-axis-2', 
     type: 'category', 
     display: false, 
     categoryPercentage: 0.6, 
     barPercentage: 1, 
     barThickness: 20, 
     gridLines: { 
     offsetGridLines: true 
     } 
    }], 
    }, 
    legend: { 
    display: false 
    } 
}; 

당신은 당신이 xAxisID: 'x-axis-2'이 중 데이터 세트 새 축에 바인딩 할에 추가되었는지 확인해야합니다.

여기에이 모든 것을 보여주는 codepen example이 있습니다.

수평 막대 차트의 경우 눈금을 변경하여이 작업을 수행 할 수도 있습니다. 이것을 보여주는 codepen example을보십시오.

Answer 2

chart.js 문서는 barThickness 속성 available in the options for a chart하지만 at the data set level 사용할 수없는 등의 옵션을 보여줍니다 포함하여 특정 효과를 나누기. 나는 당신이 당신 자신의 커스텀 차트 타입을 만들고 싶지 않다면 운이 나쁘다고 생각한다.