jqplot : draw series

Question

jqplot을 사용하여 일부 데이터를 그릴 때 작은 문제가 있습니다.

I 사용 코드는이 (code on fiddle)

I 필요

$.jqplot('chart1', [[202],[249],[148]], { 
    seriesColors : ['#ff0000', '#0f0', '#00f'], 
    seriesDefaults : { 
     renderer :$.jqplot.BarRenderer, 
     pointLabels : { 
      show : true 
     }, 
     tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
     rendererOptions : { 
      barDirection : 'horizontal' 
     } 
    }, 
    axes: { 
     yaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ["some value", "other series", "third series"], 
     }, 
    }, 
}); 

그래프 3 개 수평 영역 "어떤 값", "다른 시리즈"및 "제 시리즈" 을 가지고 각 그래프 바에 해당 지역 아래에 있고, 현재의 색상을 유지할 수 있습니다 (적색은 "일부 값", 초록색은 "다른 계열", 파란색은 "제 3 계열").

어떻게 데이터를 포맷해야합니까?

으로 추가 질문 :

1. 나는 몇 픽셀을 y 축 및 해당 도끼 라벨 사이의 마진을합니다. 어떻게 설정합니까?

2. 그래프의 색은 bg (fade yellow)입니다. 어떻게 그 색깔을 없애고 용기에 색깔이 무엇이든지간에 bg를 얻으려면 어떻게해야합니까?

Answer 1

당신은 예를 here 작업을 참조하십시오

data = [[[202,1],[248,2],[148,3]]]; 

에 데이터를 변경해야합니다.

PS1 : barWidth = xx를 설정하여 막대 너비를 변경할 수 있습니다. 여기서 xx는 픽셀 단위입니다 (주어진 예에서는 50 픽셀).

PS2 : 첫 번째 추가 질문에 대한, 당신은 이런 식으로 뭔가를 추가 할 수 있습니다

$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5}); 
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5}); 
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5}); 
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5}); 
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5}); 
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5}); 
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5}); 
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5}); 

난 당신이 깨끗한 방법으로 할 수 있습니다 확신하지만에 +5 값을 변경 (작동 어떤 차트 블록을 이동하려면 필요합니다). 업데이트 된 작업 예제를 참조하십시오. here