如何在引导模式onhighcharts中的高位图中展开相同的图表单击角度6中的缩略图

Question

我将highcharts渲染为不同的div id。单击​​这些缩略图时，应在bootstrap modal上扩展相同的图表。我已使用https://stackblitz.com/edit/hello-angular-6此编辑器进行演示，但未保存，因此我在分享此处是html，ts和package json文件。这是下面的代码

app.component.html

<div class="col-md-4 " (click)="openModal()" style="" id="chart1"></div>
<div (click)="openModal()" style="" id="chart2"></div>


<div class="backdrop" [ngStyle]="{'display':display}"></div>
<div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">


  <div class="modal-dialog" role="document">


    <div class="modal-content">


      <div class="modal-header">


        <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>


        <h4 class="modal-title">Model Title</h4>


      </div>


      <div class="modal-body">


        <p>Model body text</p>


      </div>


      <div class="modal-footer">


        <button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>


      </div>


    </div><!-- /.modal-content -->


  </div><!-- /.modal-dialog -->


</div><!-- /.modal !-->

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as Exporting from 'highcharts/modules/exporting';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  display:none;
   public chartdata=[{"chartid":"chart1"},{"chartid":"chart2"}];
  openModal(){


       this.display=block; 


    }
    onCloseHandled(){


       this.display='none'; 


    }
  name = 'Angular 6';
  ngOnInit() {
    this.chartFunc('chart1');
    this.chartFunc('chart2');
  }

  chartFunc(chartId) {
    Highcharts.chart(chartId, {
      chart: {
        type: "spline"
      },
      title: {
        text: "Monthly Average Temperature"
      },

      series: [
        {
          name: 'Tokyo',
          data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }
      ]
    });
  }
}

package.json

{
  "name": "hello-angular-6",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "core-js": "2.5.5",
    "highcharts": "^7.1.1",
    "rxjs": "6.1.0",
    "zone.js": "0.8.26"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Answer 1

您可以按照这种方法并使用highcharts-angular官方Highcharts包装器（https://github.com/highcharts/highcharts-angular）来实现：

1. 创建图表和模式组件
2. 使用图表选项创建图表服务
3. 使用图表服务中存储的数据初始化图表组件和模式组件中的图表
4. 要更新两个组件中的图表，请使用Obesrvables并更改updateFromInput = true。

演示：

• https://codesandbox.io/s/l5q0p46ojl

API参考：

• https://github.com/highcharts/highcharts-angular#options-details