Angular 5 - Highcharts 无法从 HTML 表格中加载数据

Question

我正在尝试从 htmltable 创建一个 highchart 饼图，但它没有被创建 我已经从this url 安装了 highchart。使用系列数据 highchart 运行良好。但是一旦我尝试从 html 表中选择数据。它没有形成。我也尝试过不显示任何 html 表，但它仍然无法正常工作。请建议在这种情况下该怎么做。

下面是模板代码：

  <div class="highcart_div" #highcart_div style="height: 200px; width: 100%;"></div>
        <table id="datatable" #datatable style="display: none;">

          <tbody>
            <tr>
              <th>Apples</th>
              <td>3</td>
              <td>4</td>
            </tr>
            <tr>
              <th>Pears</th>
              <td>2</td>
              <td>0</td>
            </tr>
            <tr>
              <th>Plums</th>
              <td>5</td>
              <td>11</td>
            </tr>
            <tr>
              <th>Bananas</th>
              <td>1</td>
              <td>1</td>
            </tr>
            <tr>
              <th>Oranges</th>
              <td>2</td>
              <td>4</td>
            </tr>

          </tbody>
        </table>

下面是组件代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { chart } from "highcharts";
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-analytics-content',
  templateUrl: './analytics-content.component.html',
  styleUrls: ['./analytics-content.component.css']
})
export class AnalyticsContentComponent implements OnInit {
  chart: Highcharts.ChartObject;
  @ViewChild("highcart_div") chartTarget: ElementRef;
  @ViewChild("datatable") datatable: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {

    const options: Highcharts.Options = {
      data: {
        table: this.datatable.nativeElement

      },

      chart: {
        type: 'pie'
      },
      title: {
        text: ''
      },
      yAxis: {
        allowDecimals: false,
        title: {
          text: 'Units'
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false,
          },
          innerSize: '60%'
        }
      },
      tooltip: {
        formatter: function () {
          return '<b>'
            + this.series.name
            + '</b><br/>'
            + this.point.y
            + ' '
            + this.point.name
              .toLowerCase();
        }
      }
    };
    this.chart = chart(this.chartTarget.nativeElement, options);

  }

}

Answer 1

查看官方npm highcharts，在angular组件中导入依赖

Stackblitz演示

app.component.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, OnInit, ViewChild, ElementRef, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as  Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
// Initialize exporting module.
Exporting(Highcharts);
import Data from 'highcharts/modules/data';
// Initialize Data module.
Data(Highcharts);
import ExportData from 'highcharts/modules/export-data';
// Initialize ExportData module.
ExportData(Highcharts);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {
  name = `Angular! v${VERSION.full}`;
  @ViewChild("container", { read: ElementRef }) container: ElementRef;
  @ViewChild("datatable", { read: ElementRef }) datatable: ElementRef;

  constructor() {
  }
  ngOnInit() {
    Highcharts.chart(this.container.nativeElement, {
      data: {
        table: this.datatable.nativeElement
      },
      chart: {
        type: 'column'
      },
      title: {
        text: 'Data extracted from a HTML table in the page'
      },
      yAxis: {
        allowDecimals: false,
        title: {
          text: 'Units'
        }
      },
      tooltip: {
        formatter: function () {
          return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
        }
      }
    })
  }

}