JQplot - 두 사실

Question

누적 가로 막대가 난 단지 두 가지 사실에 매우 간단한 수평 누적 막대를 렌더링합니다. 어떤 축도없이. 이처럼

: My target.

하지만 내가 할 수있는 유일한 방법은 My actuell Version입니다.

문제는 두 개의 값 (예 : "2"및 "7") 만 삽입하면 "7"에 대해 하나의 막대 만 표시된다는 것입니다. 두 번째 문제는이 작은 윤곽. 이 문제를 해결하는 방법을 모른다. 어떤 아이디어?

내 코드 : 그것은 X- 축에 padMin: 0 설정과 같은

$(document).ready(function(){ 

var s1 = [2]; 
var s2 = [7]; 
var s3 = [10]; 

plot3 = $.jqplot('chart1', [s1, s2, s3], { 
// Tell the plot to stack the bars. 
stackSeries: true, 
captureRightClick: true, 
seriesDefaults:{ 
    renderer:$.jqplot.BarRenderer, 
    rendererOptions: { 
    barDirection: 'horizontal', 
     // Put a 30 pixel margin between bars. 
     // barMargin: 30, 
     // Highlight bars when mouse button pressed. 
     // Disables default highlighting on mouse over. 
     highlightMouseDown: true 
    }, 
    pointLabels: {show: true} 
}, 
axes: { 
    yaxis: { 

    renderer: $.jqplot.CategoryAxisRenderer, 

    }, 
    xaxis: { 
    // Don't pad out the bottom of the data range. By default, 
    // axes scaled as if data extended 10% above and below the 
    // actual range to prevent data points right on grid boundaries. 
    // Don't want to do that here. 
    padMin: 0, 
    //max: 15, 

    } 
}, 
axesDefaults:{   
     showTicks: false,   
     showTickMarks: false, 

     }, 
legend: { 
    show: false, 
    location: 'e', 
    placement: 'outside' 
}, 
grid:{ 
     drawGridlines: false, 
     borderWidth: 0, 
     shadow: false, 
     background:'#ffffff', 
     gridLineColor: '#FFFFFF', 
     }, 
}); 
// Bind a listener to the "jqplotDataClick" event. Here, simply change 
// the text of the info3 element to show what series and ponit were 
// clicked along with the data for that point. 
$('#chart3').bind('jqplotDataClick', 
function (ev, seriesIndex, pointIndex, data) { 
    $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
} 
); 
}); 

Answer 1

두 번째 시리즈가 잘못 표시 될 원인이된다. 이 모든 것을 제거하면 원하는대로 작동합니다.

axesDefaults:{   
     showTicks: false,  
     showTickMarks: false, 
     tickOptions: { 
      markSize: 0, 
     } 
}, 

는 그냥 작동하지 않는 경우

는 그리드 선이 진드기 제거에 관해서는, 그래서 지금과 같이됩니다 axesDefaults 설정

tickOptions: { 
    markSize: 0, 
} 

이 추가 시도 canvasAxisTickRenderer를 사용해보십시오. 자세한 내용은 여기를 참조하십시오. http://www.jqplot.com/tests/rotated-tick-labels.php