jqPlot 막대 그래프가 중앙에 있지 않음 (오른쪽으로 너무 멀리 있음)

Question

jqPlot을 처음 사용하므로 간단한 질문으로 나를 압도하지 마십시오.

간단한 2 카테고리 막대 그래프를 생성하고 사용자 정의 할 수있는 시점까지 jqPlot에 대한 설명서를 따랐습니다 (FYI - 막대는 100 %로 합쳐서는 안됩니다 :)). 당신은 내 작은을 볼 수 있습니다

: 다음 그래프를 렌더링 내 자바 스크립트 파일에 대한 코드입니다 (대상 DIV = GraphContainer)가 렌더링하는 방법을 여기

$.jqplot('GraphContainer', [[55, 18.6]], { 
    title: 'Correct vs. Incorrect', 
    axes:{ 
     xaxis:{tickOptions: {show: false}} 
    }, 
    seriesColors:['#00FF00', '#FF0000'], 
    series:[{renderer:$.jqplot.BarRenderer}], 
    seriesDefaults: {rendererOptions: {barWidth: 50}} 
}); 

하고있다 - 중요한 문제가 바로 발생합니다. 막대는 중앙에 있지 않습니다. 제 의견으로는 그들은 너무 옳습니다. 여기에있는 옵션 설명서를 읽었습니다. jqPlot options

왼쪽에있는 가로형 "번역"을 설명하는 설명서에는 아무것도 표시되지 않았습니다. seriesDefaults에서 '수평'이 본질적으로 같은 문제에 주도하지만 (바 너무 멀리까지) 수직 방향 : 흥미롭게도, 나는 barDirection로 전환을 시도

나는의 폭을 증가시키기 위해 노력 내 목표 div하지만이 문제를 악화 (더 악화 보인다). 나는 해킹 솔루션을 생각해 냈다. height = 0의 세 번째 막대를 추가하고 barWidth를 약간 줄였습니다.이 막대는 다음 그림과 같이 막대를 왼쪽으로 밀었습니다 (위의 첫 번째 그래프와 관련 있음). 폭 바 패딩은) 내가 조정할 수 있습니다

사람이 jqPlot에 막대 그래프이 "중심"문제를 해결하는 방법을 알고 있나요? 이 사이트 (예 : this one)에 여러 개의 다른 정렬 소식을 보았지만 내 구체적인 상황에 도움이되지는 않았습니다.

Answer 1

당신은 범주/서수 데이터를 가져 와서 선형/숫자 x 축에 맞추고 있습니다 (그렇지 않으면 jqPlot은 사용자가 지정하지 않는 한 이것을 제공합니다). jqPlot에는 수치 축에 대한 몇 가지 기본 패딩 논리가 있습니다.이 논리는 불일치의 원인입니다. 가로 막대 스크린 샷에서 값이 1.0 및 2.0으로 표시됨을 알 수 있습니다. 기본 패딩 로직이 0에서 축을 시작하고 마지막 값에 25 %를 추가한다고 가정합니다.

이론적으로 이것을 피하기 위해 min/max of the axis을 설정할 수 있습니다. 하지만 좀 더 간단한 해결책은 x 축에 범주 축 ($.jqplot.CategoryAxisRenderer)을 사용하는 것입니다. 단순히 x 축의 숫자 계산이나 채우기를 시도하지는 않습니다.

아래의 코드는 jqPlot 사이트에서 Bar Colors Example를 기반으로하고 예에 따라 수정 :

var graphData = [['Correct', 55],['Incorrect', 18.6]]; 

$('#GraphContainer').jqplot([graphData], { 
    title: 'Correct vs. Incorrect', 
    seriesColors:['#00FF00', '#FF0000'], 
    seriesDefaults:{ 
     renderer:$.jqplot.BarRenderer, 
     rendererOptions: { 
      varyBarColor: true 
     } 
    }, 
    axes:{ 
     xaxis:{ 
      renderer: $.jqplot.CategoryAxisRenderer 
     } 
    } 
}); 

여기에 작업 JSFiddle의 예를 참조하십시오

http://jsfiddle.net/3y9ZU/3/