加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

如何在放大高图时启用y轴平移?

发布时间:2020-12-16 09:56:20 所属栏目:asp.Net 来源:网络整理
导读:当我放大图表时,我想在Y轴移动 现在我可以在缩放时移动X轴 Bellow是平移的代码 chart: { renderTo: 'container1',type: 'column',zoomType: 'xy',panning: true,panKey: 'shift',} 任何帮助,将不胜感激 解决方法 可能的解决方案: 您可以在Highstock中设置垂
当我放大图表时,我想在Y轴移动
现在我可以在缩放时移动X轴

Bellow是平移的代码

chart: {
        renderTo: 'container1',type: 'column',zoomType: 'xy',panning: true,panKey: 'shift',}

任何帮助,将不胜感激

解决方法

可能的解决方案:

>您可以在Highstock中设置垂直滚动条.

yAxis: {
        scrollbar: {
            enabled: true
        }
    },

文章:http://www.highcharts.com/news/224-scrollbars-for-any-axis

演示:http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/scrollbar/

>使用基于Barbara建议的the plugin的包装代码(包含在下面),允许缩放(xy)和平移(xy).

包装代码:

(function (H) {
    H.wrap(H.Chart.prototype,'pan',function (proceed) {
        var chart = this,hoverPoints = chart.hoverPoints,doRedraw,e = arguments[1],each = H.each;

        // remove active points for shared tooltip
        if (hoverPoints) {
            each(hoverPoints,function (point) {
                point.setState();
            });
        }

        var mousePosX = e.chartX,mousePosY = e.chartY,xAxis = chart.xAxis[0],yAxis = chart.yAxis[0],startPosX = chart.mouseDownX,startPosY = chart.mouseDownY,halfPointRangeX = (xAxis.pointRange || 0) / 2,halfPointRangeY = (yAxis.pointRange || 0) / 2,extremesX = xAxis.getExtremes(),newMinX = xAxis.toValue(startPosX - mousePosX,true) + halfPointRangeX,newMaxX = xAxis.toValue(startPosX + chart.plotWidth - mousePosX,true) - halfPointRangeX,extremesY = yAxis.startingExtremes,newMaxY = yAxis.toValue(startPosY - mousePosY,true) + halfPointRangeY,newMinY = yAxis.toValue(startPosY + chart.plotHeight - mousePosY,true) - halfPointRangeY;

        if (xAxis.series.length && newMinX > Math.min(extremesX.dataMin,extremesX.min) && newMaxX < Math.max(extremesX.dataMax,extremesX.max) && newMinY > Math.min(extremesY.dataMin,extremesY.min) && newMaxY < Math.max(extremesY.dataMax,extremesY.max)) {
            xAxis.setExtremes(newMinX,newMaxX,false,{
                trigger: 'pan'
            });
            yAxis.setExtremes(newMinY,newMaxY,{
                trigger: 'pan'
            });
            doRedraw = true;
        }

        chart.mouseDownX = mousePosX;
        chart.mouseDownY = mousePosY;// set new reference for next run

        if (doRedraw) {
            chart.redraw(false);
        }
    });

}(Highcharts));

应该在图表的回调或图表的加载事件中设置起始极值,例如:

},function(chart){
        chart.yAxis[0].startingExtremes = chart.yAxis[1].getExtremes();
    });

演示:http://jsfiddle.net/Lxjqed02/3/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读