chartist.js로 스택 된 막대 주위의 간격 제어

Question

가로로 쌓인 막대 다이어그램을 그립니다. 각 막대의 위와 아래 공간을 제어하고 싶습니다. 당신은 사용하여 각 막대 자체의 높이를 지정할 수 있습니다

는

.ct-bar{ 
    stroke-width: 30px; 
} 

그러나 차티스트는 전체 그래프에 지정된 높이에 따라 각 스택의 주위에 공간을 결정하는 것 같다. 대신 각 스택 주위의 높이를 지정하고 그릴 막대 수에 따라 차트 높이를 늘리십시오.

나는 chartist의 API/문서를 살펴 봤지만 내가 찾고있는 설정을 찾을 수 없다. 또한 그래프의 높이를 설정하지 않으려 고했으나 차트 작성자는 사용 가능한 전체 높이를 사용하고 사용 가능한 높이를 기반으로 바를 채 웁니다.

바 주변의 간격을 제어하는 ​​방법이 있습니까 (바 너비가 아닌가?).

편집 : 내가 뭘하려고 오전의 예는 이것이다 : 당신은 Q1, Q2, Q3, 등을 참조하는 누적 막대 도표에서 https://gionkunz.github.io/chartist-js/examples.html#stacked-bar 나는이 각각 소요 공간의 크기를 제어 할 그것은 자동으로 chartist에 의해 결정되는 데보다.

Answer 1

코드가 없으므로 사이트의 Examples 섹션에서 가로 바코드 예제를 사용했습니다.

선은 X & y를 속성으로 직사각형으로 만들어 svgs 당신이 이미 프레임 워크로 계산 된 것 후를 조정하려는 경우에 따라서는 CSS 기능을 변환 사용할 수

<line y1="29.0892857142857" y2="29.0892857142857" x1="80" x2="289.1640625" class="ct-bar" value="5"></line> 

를 지정했습니다. 여기서는 일련의 수평 막대를 변경하지 않고 시리즈 B 만 조정합니다.

.ct-series-b .ct-bar { 
    transform: translateY(-4px); 
} 

다음은 MDN의 CSS3 transform: translate에 대한 일부 문서입니다.