Angular10 使用highcharts

之前一个项目使用过highchart,最近整个项目又要使用了,但是隔了很久了有点忘记了,又查了一次,这次记录下.

安装

npm install highcharts angular-highcharts --save

使用

module.ts
引入ChartModule,并且在providers里面引入下面的代码(因为我要使用networkgraph所以引入了它,要看具体的需求)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Neo4jComponent } from './neo4j.component';
import { HIGHCHARTS_MODULES, ChartModule } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as networkgraph from 'highcharts/modules/networkgraph.src';
import { RouterModule, Route } from '@angular/router';
const CHART_ROUTE: Route[] = [{
  path: '',
  component: Neo4jComponent
}]

@NgModule({
  declarations: [Neo4jComponent],
  imports: [
    CommonModule,
    ChartModule,
    RouterModule.forChild(CHART_ROUTE)
  ],
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [more, exporting, networkgraph] }
  ]
})
export class Neo4jModule { }

component.ts
这里面初始化数据,我这里直接hardcode了方便演示,正常环境下肯定从从后端拿数据了.

import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';

@Component({
  selector: 'jhi-neo4j',
  templateUrl: './neo4j.component.html',
  styleUrls: ['./neo4j.component.scss']
})
export class Neo4jComponent implements OnInit {

  public chart?: Chart;
  private chartStr: any;
  constructor() {
    this.chartStr = {
      chart: {
        type: 'networkgraph',
      },
      exporting: {
        enabled: false
      },

      title: null,
      credits: {
        enabled: false
      },
      plotOptions: {
        networkgraph: {
          keys: ['from', 'to'],
          layoutAlgorithm: {
            enableSimulation: true,
            friction: -0.9
          }
        }
      },
      series: [
        {
          dataLabels: {
            enabled: true,
            linkFormat: ''
          },
          marker: {
            radius: 4
          },
          color: 'rgb(124, 181, 236)',
          data: [
            ['Proto Indo-European', 'Balto-Slavic'],
            ['Proto Indo-European', 'Germanic'],
            ['Proto Indo-European', 'Celtic'],
            ['Proto Indo-European', 'Italic'],
            ['Proto Indo-European', 'Hellenic'],
            ['Proto Indo-European', 'Anatolian'],
            ['Proto Indo-European', 'Indo-Iranian'],
            ['Proto Indo-European', 'Tocharian'],
            ['Indo-Iranian', 'Dardic'],
            ['Indo-Iranian', 'Indic'],
            ['Indo-Iranian', 'Iranian'],
            ['Iranian', 'Old Persian'],
            ['Old Persian', 'Middle Persian'],
            ['Indic', 'Sanskrit'],
            ['Italic', 'Osco-Umbrian'],
            ['Italic', 'Latino-Faliscan'],
            ['Latino-Faliscan', 'Latin'],
            ['Celtic', 'Brythonic'],
            ['Celtic', 'Goidelic'],
            ['Germanic', 'North Germanic'],
            ['Germanic', 'West Germanic'],
            ['Germanic', 'East Germanic'],
            ['North Germanic', 'Old Norse'],
            ['North Germanic', 'Old Swedish'],
            ['North Germanic', 'Old Danish'],
            ['West Germanic', 'Old English'],
            ['West Germanic', 'Old Frisian'],
            ['West Germanic', 'Old Dutch'],
            ['West Germanic', 'Old Low German'],
            ['West Germanic', 'Old High German'],
            ['Old Norse', 'Old Icelandic'],
            ['Old Norse', 'Old Norwegian'],
            ['Old Norwegian', 'Middle Norwegian'],
            ['Old Swedish', 'Middle Swedish'],
            ['Old Danish', 'Middle Danish'],
            ['Old English', 'Middle English'],
            ['Old Dutch', 'Middle Dutch'],
            ['Old Low German', 'Middle Low German'],
            ['Old High German', 'Middle High German'],
            ['Balto-Slavic', 'Baltic'],
            ['Balto-Slavic', 'Slavic'],
            ['Slavic', 'East Slavic'],
            ['Slavic', 'West Slavic'],
            ['Slavic', 'South Slavic']
            // Leaves:
          ]
        }
      ]
    };
  }

  ngOnInit(): void {
    this.chart = new Chart(this.chartStr as Highcharts.Options)
  }
}

这里有一点要注意,如果这么写是会报错的===>new Chart(this.chartStr).文档中的解释是这样的

roubleshooting
If you expiring typing errors while you build/serve your angular app the following could be helpful:

// override options type with <any>
chart = new Chart(<any>{ options });
This is very useful when using gauge chart type.

但是我开启了严格语法检测,这样写我编辑器里面还是会报错,所以改成了代码中的样式,严格说我这样还标准一点

component.html

<div [chart]="chart!"></div>

效果