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

时间:2016-09-09 14:02:00

标签: highcharts asp.net-mvc-5

我想在放大图表时移动Y轴 现在我可以在缩放时移动X轴

Bellow是用于平移的代码

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

任何帮助将不胜感激

2 个答案:

答案 0 :(得分:4)

可能的解决方案:

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

        yAxis: {
            scrollbar: {
                enabled: true
            }
        },
    
  2. 文章: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/

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

      (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, false, {
                      trigger: 'pan'
                  });
                  yAxis.setExtremes(newMinY, newMaxY, false, false, {
                      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/

答案 1 :(得分:-1)

Y轴平移不是内置于HighCharts中的。但是,有一个插件可以解决问题:http://www.highcharts.com/plugin-registry/single/27/Y-Axis%20Panning 这些例子表明它与highStock一起使用,但它与highCharts同样适用。