jqplot放大categoryAxisRenderer无法正常工作

时间:2016-12-22 12:33:41

标签: jqplot zooming

我正在使用jqplot CategoryAxisRenderer作为我的x轴数据。我也需要缩放。但我只能缩放y轴。请提出解决方案。我是图表新手。我搜索了很多,但没有得到正确的答案。请提供答案。 这是我的代码。

    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 个答案:

答案 0 :(得分:-1)

您是否尝试过使用contrainZoomTo:'x'。

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