Question

我正在尝试从htmltable创建一个高图派，但它没有被创建我已经从this url 安装了高图。使用系列数据，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，导入角度组件中的依赖项

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

}

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

1 个答案: