Question

如何在角度4打字稿项目中使用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();

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

Answer 2

使用angular2-highcharts，您必须更新chart-events

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演示

在角度4中使用highcharts SvgRenderer类

2 个答案: