移动设备上的高图表(触摸可缩小和放大) - 折线图

Question

我正在尝试在移动设备上的折线图中应用放大和缩小。目标是单击图表的一个区域，并在第一次单击中放大，在第二次单击中缩小。序列将始终是这个。

我已经活着看到文档/示例，我找不到任何可以解决这种情况的东西。

我已经尝试在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

是的，第二个挑战可以通过将此逻辑添加到回调函数plotOptions.series.events.click轻松实现：

chart: {
events: {
load: function() {
this.clickedOnce = false;
},
click: function() {
const chart = this;
if (chart.clickedOnce) {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
},
plotOptions: {
series: {
events: {
click: 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 / 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/kotgea5n/
• https://jsfiddle.net/BlackLabel/s8w2xg3e/1/

Answer 2

默认情况下，此功能不会在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/

接口参考：

• https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

• https://api.highcharts.com/class-reference/Highcharts.Chart#zoomOut

• https://api.highcharts.com/highcharts/chart.events.click

---

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

演示：

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