Highcharts 在 Angular 中的矢量图缩放

huangapple go评论125阅读模式
英文:

Highcharts zooming for vector plot in Angular

问题

HTML:

  1. <highcharts-chart
  2. id="vector"
  3. [Highcharts]="vectorCharts"
  4. [options]="chartObj"
  5. </highcharts-chart>

TS:

  1. import * as Highcharts from 'highcharts'
  2. import vector from 'highcharts/modules/vector'
  3. vector(Highcharts);
  4. public vectorCharts = Highcharts;
  5. public chartObj: any = {
  6. series: [{
  7. type: 'vector',
  8. data: dataVals, // calculated in other part of code
  9. }],
  10. chart: {
  11. zoomType: 'xy',
  12. height: 100,
  13. width: 200
  14. }
  15. }

(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:

  1. <highcharts-chart
  2. id="vector"
  3. [Highcharts]="vectorCharts"
  4. [options]="chartObj"
  5. </highcharts-chart>

TS:

  1. import * as Highcharts from 'highcharts'
  2. import vector from 'highcharts/modules/vector'
  3. vector(Highcharts);
  4. public vectorCharts = Highcharts;
  5. public chartObj: any = {
  6. series: [{
  7. type: 'vector',
  8. data: dataVals, // calculated in other part of code
  9. }],
  10. chart: {
  11. zoomType: 'xy',
  12. height: 100,
  13. width: 200
  14. }
  15. }

答案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

huangapple
  • 本文由 发表于 2023年6月2日 08:30:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76386497.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定