2016-12-22 2 views
1

x軸データにjqplot CategoryAxisRendererを使用しています。私もズームが必要です。しかし、私はy軸だけをズームすることができます。解決策を提案してください。私はチャートが初めてです。私は多くを検索しましたが、適切な答えを得られませんでした。答えを提供してください。 これは私のコードです。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/ –