在角度4中使用highcharts SvgRenderer类
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在角度4中使用highcharts SvgRenderer类相关的知识,希望对你有一定的参考价值。
如何在角度4打字稿项目中使用HighCharts SvgRenderer类来在高图表中渲染图像?
答案
就像常规的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
另一答案
使用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);
Z zxswい但是
以上是关于在角度4中使用highcharts SvgRenderer类的主要内容,如果未能解决你的问题,请参考以下文章
Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图