使用Angular 4和HighCharts实现自定义温度计

Question

我正在尝试实现以下example，它基本上是一个用JavaScript中的highcharts库实现的自定义温度计。除了以下代码块之外，一切正常。

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

它不会渲染温度计的背景图像，也不会在代码中抛出任何错误。这是此图的component.ts文件。

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);
  }

}

这是我的module.ts文件

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 { }

有人可以帮助我在使用highcharts和angular4渲染的图表中显示自定义图像吗？

Answer 1

使用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)" 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);

Z zxswい但是