Question

我正在尝试在移动设备上的折线图中应用ZoomIn和ZoomOut。目标是单击图表的区域，并在第一次单击中单击“放大”，在第二次单击上单击“缩放”。顺序永远是这个顺序。

我已经看到了文档/示例，但找不到解决该问题的方法。

我已经尝试在chart:属性中使用此属性

pinchType : 'y',
zoomType: 'none'

我尝试了zoomtype，但是行为不是我所期望的。我想单击以放大图表的此特定区域。我不想用两根手指进行缩放。

{
    chart: {
        pinchType : 'x'
    },
    legend: {
        itemStyle: {
            color: '#fff'
        }
    },
    plotOptions: {
        series: {
            animation: {
                duration: 2000
            }
        }
    },
    xAxis: {
        tickInterval: 1
    },
    series: [
        {
            type: 'spline',
            color : '#fff'
        },
        {
            dashStyle: 'longdash',
            color: '#b3be77'
        }
    ],
}

只需单击即可放大和缩小

Answer 1

默认情况下，Highcharts中未实现此功能，但单击图表区域时，可以通过添加自定义逻辑来轻松实现此功能。

第一次单击区域时，使用axis.setExtremes()方法放大。第二次单击时，使用chart.zoomOut()缩小图表。查看下面发布的演示和代码。

代码：

  chart: {
    events: {
      load: function() {
        this.clickedOnce = false;
      },
      click: function(e) {
        const chart = this,
          yAxis = chart.yAxis[0],
          xAxis = chart.xAxis[0];

        let x,
          y,
          rangeX,
          rangeY;

        if (!chart.clickedOnce) {
          x = xAxis.toValue(e.chartX);
          y = yAxis.toValue(e.chartY);
          rangeX = xAxis.max - xAxis.min;
          rangeY = yAxis.max - yAxis.min;

          xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
          yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
          chart.redraw();

          chart.clickedOnce = true;
        } else {
          chart.zoomOut();
          chart.clickedOnce = false;
        }
      }
    }
  }

演示：

https://jsfiddle.net/BlackLabel/fxm812k4/

API参考：

使用customEvents插件（请参阅：https://github.com/blacklabel/custom_events）并在整个图表区域添加plotBand，您可以在单击和双击事件中注册回调。使用这种方法，您可以放大单击事件，而放大双击事件（不适用于移动设备）。

演示：

https://jsfiddle.net/BlackLabel/6tpb5q2z/

Answer 2

非常感谢@Wojciech Chmiel

像魅力一样工作：）

但是现在……新挑战：）。

为整个地图设置了缩放比例，但目标是在“序列”值上放大。仅当用户单击地图上的某个点时，才应进行缩放。当用户未单击这些点时，不应缩放。

是否可以将此事件添加到系列中的每个值？使用“ this”。单击图表的元素？我尝试但不起作用。

致谢

Answer 3

是的，可以通过向for(let i = 0; i < namelist.length; i++){ if(namelist[i].includes(name)){ object = namelist[i]; console.log(object); break; } }回调函数中添加以下逻辑来轻松解决第二个挑战：

plotOptions.series.events.click

演示：

Answer 4

好的。另一个问题。现在，我只想在屏幕上双击时进行缩放。

我将事件的类型更改为dblclick，但不起作用：（

  chart: {
events: {
  load: function() {
    this.clickedOnce = false;
  },
  dblclick: function() {
    const chart = this;

    if (chart.clickedOnce) {
        chart.zoomOut();
      chart.clickedOnce = false;
    }
  }
}
  },
   plotOptions: {
    series: {
  events: {
    dblclick: function(e) {
      const chart = this.chart,
        yAxis = chart.yAxis[0],
        xAxis = chart.xAxis[0];

      let x,
        y,
        rangeX,
        rangeY;

      if (!chart.clickedOnce) {
        x = xAxis.toValue(e.chartX);
        y = yAxis.toValue(e.chartY);
        rangeX = xAxis.max - xAxis.min;
        rangeY = yAxis.max - yAxis.min;

        xAxis.setExtremes(x - rangeX / 20, x + rangeX / 20, false);
        yAxis.setExtremes(y - rangeY / 20, y + rangeY / 20, false);
        chart.redraw();

        chart.clickedOnce = true;
      } else {
        chart.zoomOut();
        chart.clickedOnce = false;
      }
    }
  },
    animation: {
            duration: 1000
        }
}
      },
legend: {
    itemStyle: {
        color: '#fff'
    }
},
xAxis: {
    tickInterval: 1
},
series: [
    {
        type: 'spline',
        color : '#fff'
    },
    {
        dashStyle: 'longdash',
        color: '#b3be77'
    }
],

我在Fiddle上看到的这个示例仅适用于双击

DoubleClick

有一种方法可以在图表的Json中插入Jquery。

非常感谢

Answer 5

我尝试上面的示例，但没有用:( 此功能要在移动设备上使用。但是无论如何，我都使用此示例在网络上进行了测试，但它不起作用：（

我使用以下示例： jsfiddle.net/BlackLabel/v6hqzent/1 /

可能是因为highchart的版本。我正在使用4.2.1。

非常感谢：）

手机上的Highchart（触摸可放大和缩小）-LineChart

5 个答案: