angular - 在角度 4 中使用 highcharts SvgRenderer 类

Question

如何在 angular 4 typescript 项目中使用 HighCharts SvgRenderer类在高图表中渲染图像？

Answer 1

就像在常规的 Highcharts 中一样：

var chart = this.chart = Highcharts.chart(this.container.nativeElement, {
  series: [{
    data: [1,2,3,4,5]
  }]
})

chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 100, 100, 30, 30)
.add();

SVGRenderer这是在Angular 4项目中使用的实时工作示例： http ://plnkr.co/edit/tZIGkSXoogeCyUReARaP?p=preview

Answer 2

使用 angular2-highcharts 你必须更新图表事件

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts'; 

@Component({
    selector: 'my-app',
    styles: [`
      chart {
        display: block;
      }
    `],
    template: `<chart [options]="options" (load)="onChartload($event)"></chart>`
})
class AppComponent {
    constructor() { 
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129],
            }]
        };
    }
    options: Object;
    onChartload (e) {
      e.context.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 100, 100, 30, 30)
              .add();

    }
}

@NgModule({
  imports:      [BrowserModule, ChartModule.forRoot(require('highcharts'))],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

Plunker演示