英文:
Highcharts zooming for vector plot in Angular
问题
HTML:
<highcharts-chart
id="vector"
[Highcharts]="vectorCharts"
[options]="chartObj"
</highcharts-chart>
TS:
import * as Highcharts from 'highcharts'
import vector from 'highcharts/modules/vector'
vector(Highcharts);
public vectorCharts = Highcharts;
public chartObj: any = {
series: [{
type: 'vector',
data: dataVals, // calculated in other part of code
}],
chart: {
zoomType: 'xy',
height: 100,
width: 200
}
}
(Note: The code portions remain unchanged in the translation.)
英文:
Hi I have a about 20 vector plots that I am loading to my UI and each has the same yaxis and xaxis range. I am able to zoom into each individual plot with no problem. I want to create a 'synced zoom' feature where we the user zooms into one of the vector plots it also zooms into the other vector plots by the same amount. I am really struggling to capture the zoom event. Any idea on how to do this? In plotly you can do the (relayout) event handler to capture such an event...
HTML:
<highcharts-chart
id="vector"
[Highcharts]="vectorCharts"
[options]="chartObj"
</highcharts-chart>
TS:
import * as Highcharts from 'highcharts'
import vector from 'highcharts/modules/vector'
vector(Highcharts);
public vectorCharts = Highcharts;
public chartObj: any = {
series: [{
type: 'vector',
data: dataVals, // calculated in other part of code
}],
chart: {
zoomType: 'xy',
height: 100,
width: 200
}
}
答案1
得分: 1
这里有几个关于该库官方 GitHub 仓库的讨论帖，其中最有帮助的可能是这个：https://github.com/highcharts/highcharts-angular/issues/93
只需添加，例如，zoomType: 'x' 以启用缩放：https://codesandbox.io/s/angular-forked-cnywc5
英文:
There are several threads on the library's official GitHub repository, the most helpful might be this one: https://github.com/highcharts/highcharts-angular/issues/93
Just add to it, for example, zoomType: 'x' to enable zooming: https://codesandbox.io/s/angular-forked-cnywc5
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论