2012-01-05 5 views
4
나는 코드가 여기에 표시를 사용하여 스택 수평 막대 차트를 만들 jqplot을 사용하고

변경하는 방법 :jqplot에 라벨 스택 수평 막대 그래프

:

perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]]; 
series_array = [ { label: "Mud", color: "#ccaa00"}, { label: "Sand", color: "#ffeecc"}, 
       { label: "Gravel", color: "#dddddd"}, { label: "Rock", color: "#664400"} ]; 
var perc_chart = $.jqplot('perc_div', perc_data, { 
    stackSeries: true, 
    seriesDefaults: { 
     renderer:$.jqplot.BarRenderer, 
     shadowAngle: 135, 
     rendererOptions: { barWidth: 25, 
          barDirection: 'horizontal', 
     } 
    }, 
    series: series_array, 
    axes: { 
     yaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      rendererOptions: { tickRenderer: $.jqplot.AxisTickRenderer, 
           tickOptions: { mark: null, 
               fontSize: 12 
              } 
      } 
     }, 
     xaxis: { 
      min: 0, 
      max: 100, 
      numberTicks: 6 
     } 
    }, 
    grid: { 
     drawGridlines: false, 
     drawBorder: false, 
     shadow: false 
    } 
}); 

결과 막대 차트는 다음과 같습니다를 enter image description here

내가 다음에하고 싶은 것은 막대의 레이블을 '1'에서 'My Label'로 변경하는 것입니다. 나는 단순히 다음에 원래 값에서 perc_data을 변경할 수 있다고 생각했을 것이다 :

perc_data = [[[6, "My Label"]], [[92, "My Label"]], [[1, "My Label"]], [[1, "My Label"]]]; 

하지만 그 빈 막대 차트 결과 :

enter image description here

누군가가 나에게 무엇을 내가 말해 주시겠습니까 잘못하고 어떻게이 라벨을 꼬집는 지.

감사합니다.

답변

6

사용 ticks option (2nd example on this page)는 :

perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]]; 
ticks = ["My Label"]; 

series_array = [ { label:'Mud', color:"#ccaa00"}, { label:"Sand", color:"#ffeecc"}, { label:"Gravel", color:"#dddddd"}, { label:"Rock", color:"#664400"} ]; 

var perc_chart = $.jqplot('chart1', perc_data, { 
    stackSeries: true, 
    seriesDefaults: { 
     renderer:$.jqplot.BarRenderer, 
     shadowAngle: 135, 
     rendererOptions: { barWidth: 25, 
          barDirection: 'horizontal', 
     } 
    }, 
    series: series_array, 
    axes: { 
     yaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      rendererOptions: { tickRenderer: $.jqplot.AxisTickRenderer, 
           tickOptions: { mark: null, 
               fontSize: 12 
              } 
      }, 
      ticks: ticks 
     }, 
     xaxis: { 
      min: 0, 
      max: 100, 
      numberTicks: 6 
     } 
    }, 
    grid: { 
     drawGridlines: false, 
     drawBorder: false, 
     shadow: false 
    } 
}); 

enter image description here

BTW, { label="Mud", color="#ccaa00"} 유효한 자바 스크립트 { label:"Mud", color:"#ccaa00"}

+0

감사 표시해야되지 않습니다! (이 예제의 코드를 단순화하려는 시도의 일환으로 js 오타를 찾아 주셔서 감사합니다. 필자의 예를 수정하여 업데이트했습니다.) – sfletche

+0

+1 @mark 이렇게하면 제한하는 방법을 알 수있었습니다. 100 (나는 forceTickAt100을 사용하려고 시도했다 : 사실이지만 작동하지 않는다.) –