Implementieren benutzerdefinierter Temperaturanzeige mit Angular 4 und HighCharts

Question

Ich versuche, die folgenden example implementieren, die im Grunde eine benutzerdefinierte Temperaturanzeige mit Highcharts-Bibliothek in JavaScript implementiert ist. Alles funktioniert gut außer dem folgenden Codeblock.

function(chart) { // on complete chart.renderer.image('a',24, 0, 110, 510).add()}

Es rendert nicht das Hintergrundbild der Temperaturanzeige und es wird auch kein Fehler im Code zu werfen. Dies ist meine component.ts-Datei für dieses Diagramm.

import { TempHumidService } from './../chart-service/temp-humid.service'; 
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 
import { ChartType } from '../chart'; 

@Component({ 
    selector: 'app-temp-humidity', 
    templateUrl: './temp-humidity.component.html', 
    styleUrls: ['./temp-humidity.component..scss'] 
}) 
export class TempHumidityComponent implements OnInit { 
    chartType = ChartType; 
    humidGraph: object; 
    tempGraph: object; 
    @Input() filterData: object; 
    @Output() moneySaveClick: EventEmitter<any> = new EventEmitter<any>(); 

    constructor(
    private tempHumidService: TempHumidService 
) { } 

    ngOnInit() { 
    this.humidGraph = this.tempHumidService.initHumidGraph(); 
    this.tempGraph = { 
     chart: { 
     type: 'column', 
     marginBottom: 53 
     }, 
     credits: { 
     enabled: false 
     }, 
     title: null, 
     legend: { 
     enabled: false 
     }, 
     exporting: { 
     enabled: false 
     }, 
     yAxis: { 
     min: 0, 
     max: 100, 
     title: null, 
     align: 'right' 
     }, 
     xAxis: { 
     labels: false 
     }, 
     series: [{ 
     data: [60], 
     color: 'red' 
     }], 
     function (chart) { // on complete 
     chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg',24, 0, 110, 510) 
     .add(); 
     }, 
    } 
    } 

    onClick(value) { 
    this.moneySaveClick.emit(value); 
    } 

} 

und das ist mein module.ts

Datei

import { Routes, RouterModule } from '@angular/router'; 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { Ng2TableModule } from 'ng2-table/ng2-table'; 
import { LineGraphComponent } from './line-graph/line-graph.component'; 
import { ChartsComponent } from './charts/charts.component'; 
import { HttpClientModule } from '@angular/common/http'; 

// for using highCharts 
import { ChartModule } from 'angular2-highcharts'; 
import * as highcharts from 'highcharts'; 
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService'; 

export function highchartsFactory() { 
    const hc = require('highcharts/highstock'); 
    const hcm = require('highcharts/highcharts-more'); 
    const sg = require('highcharts/modules/solid-gauge'); 

    hcm(hc); 
    sg(hc); 
    return hc; 
} 

import { JsonpModule } from '@angular/http'; 

const ROUTES: Routes = [ 
    { path: '', component: DashboardComponent } 
] 
@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild(ROUTES), 
    PaginationModule.forRoot(), 
    FormsModule, 
    ReactiveFormsModule, 
    Ng2TableModule, 
    ChartModule, 
    ChartModule, 
    JsonpModule, 
    HttpClientModule 
    ], 
    exports: [ 
    RouterModule 
    ], 
    providers: [ 
    MoneySavedService, 
    TempHumidService, 
    GraphApiService, 
    { 
     provide: HighchartsStatic, 
     useFactory: highchartsFactory 
    } 
    ], 
    declarations: [ 
    DashboardComponent, 
    LineGraphComponent, 
    ] 
}) 
export class DashboardModule { } 

Kann bitte einige Körper helfen mir ein eigenes Bild in der Tabelle mit highcharts und angular4 gemacht zu ermöglichen, zeigt?

Answer 1

Mit angular2-highcharts Sie haben 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)" style="width: 110px; height: 510px; margin: 0 auto"></chart>` 
}) 
class AppComponent { 
    constructor() { 
     this.options = { 
      chart: { 
       type: 'column', 
       marginBottom: 72 
      }, 
      credits: { 
       enabled: false 
      }, 
      title: '', 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      yAxis: { 
       min: 0, 
       max: 100, 
       title: null, 
       align: 'right' 
      }, 
      xAxis: { 
       labels: false 
      }, 
      series: [{ 
       data: [54], 
       color: '#c00' 
      }] 
     }; 
    } 
    options: Object; 
    onChartload (e) { 
     e.context.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg',24, 0, 110, 510).add(); 

    } 
} 

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


platformBrowserDynamic().bootstrapModule(AppModule); 

Plunker Demo

aktualisieren