在角度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 - 工具提示的悬停事件处理抛出异常

在循环中在 Highcharts 中创建多个系列

vue.js 中怎么使用 highCharts

Laravel 4 项目中的 Highcharts 不显示

Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图

Highcharts3.0.1 在导出报表时,如何解决X轴日期显示过多而出现重叠的问题