2016-12-22 3 views
1

x 축 데이터에 jqplot CategoryAxisRenderer을 사용하고 있습니다. 확대가 필요합니다. 그러나 y 축만 확대/축소 할 수 있습니다. 해결책을 제안하십시오. 나는 차트를 처음 사용합니다. 나는 많은 것을 수색했으나 didnt는 적절한 대답을 얻는다. 답변을주십시오. 이것은 내 코드입니다.jqplot zooming categoriesAxisRenderer가 작동하지 않습니다.

function renderBarChart(){ 
    barChartData = [["abcd",56], ["efgh",60], ["ghij",79],["klmn",20],["opqr",34],["stuv",67],["wxyz",42],["adfg",77],["ghjy",29]]; 
    plot2 = $.jqplot('barChart', [barChartData], { 
     seriesColors: ["#4fb3ce"], 
     animate: !$.jqplot.use_excanvas, 
     highlighter: { 
      show: true, 
      showMarker:false, 
      tooltipLocation:'n', 
      tooltipOffset: 6, 
      tooltipContentEditor:tooltip_formatter_bar 
     }, 
     grid: { 
      background: '#f7fafa', 
      drawBorder: false, 
      shadow: false, 
      gridLineColor: '#eceeee', 
      gridLineWidth: 1 
     }, 
     legend: { 
      show: false 
     }, 
     seriesDefaults:{ 
      showMarker:false, 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: { 
       barPadding: 0, 
       barMargin: 0, 
       barWidth:20, 
       shadowAlpha: 0.04, 
       shadowOffset:1.5, 
       highlightMouseOver: false, 
       dataLabels: 'percent' 
      }, 
      pointLabels:{ 
       show: true, 
       ypadding : 5, 
       color: '#7c7c7c', 
      } 

     }, 
     axesDefaults: { 
      rendererOptions: { 
       baselineWidth: 1, 
       baselineColor: '#eceeee', 
       drawBaseline: true 
      } 
     }, 
     axes: { 

      xaxis: { 
       showMark: false, 
       renderer: $.jqplot.CategoryAxisRenderer, 
       //ticks: barTicks, 
       //pad: 0, 
       label:'Associate ID', 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
       labelOptions: { 
        fontFamily: 'Arial', 
        fontSize: '12px' 
       }, 
       tickOptions: { 
        angle: 0, 
        textColor: '#7c7c7c', 
        showMark: false, 
        fontSize: '10px' 
       } 
      }, 
      yaxis: { 
       tickOptions: { 
        showMark: false, 
        fontSize: '10px' 
       }, 
       min:0, 
       max:100, 
       tickInterval:10, 
       label: 'Incident', 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
        fontFamily: 'Arial', 
        fontSize: '12px' 
       } 
      } 
     }, 
     cursor:{ 
      show: true, 
      zoom:true 
      } 
    }); 
} 

답변

-1

contrainZoomTo : 'x'를 사용해 보셨습니까? constrainZoomTo를 사용

cursor: { 
      show: true, 
      showTooltip: true, 
      zoom: true, 
      constrainZoomTo: 'x' 
     }, 
+0

가 'X'확대에 대한 포인터를 표시하지만 정말 차트를 확대하지 않습니다 –

+0

여기 jsfiddle 링크입니다 http://jsfiddle.net/559utdvp/2/ –