Javascript 如何在角度上使用Highchart？

我想在我的angular上制作一张带有Highchart的图表，但我一直坚持使用它，因为Highchart官方网站上缺少关于Highchart在angular中使用的信息

这是queue-dashboard.component.ts上的highchart库：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { CountryunitService } from '../../countryunit.service';
import * as Highcharts from 'highcharts';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { map } from 'lodash';

这是

ngOnInit（）

queue-dashboard.component.ts中的内容

ngOnInit() {

  var chart = Highcharts.chart('container', {

    title: {
      text: 'Chart.update'
    },

    subtitle: {
      text: 'Plain'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      type: 'column',
      colorByPoint: true,
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      showInLegend: false
    }]

  });

如果要调用此队列中的图表-dashboard.component.html，我应该怎么做

<div eds-tile class="xl-6" style="height: 350px">
<eds-tile-title>Count of Ticket ID by CU ID</eds-tile-title>
<!-- Highchart On This -->
</div>

按CU ID统计票证ID

使用HTML呈现图表有多种方法。我会尽量解释其中的几个

1.我们可以通过在图表配置对象中指定元素名称来呈现元素上的图表。 因此，假设您希望在HTML文件中提到的div上呈现图表

<div eds-tile class="xl-6" style="height: 350px">
<eds-tile-title>Count of Ticket ID by CU ID</eds-tile-title>
<div id="chartContainer"></div>
<!-- Highchart On This -->
</div>

导出类YourComponentName实现OnInit{

setTimeout( ()=>{
  this.Highcharts.chart({
   chart: {
      type: 'column',
      renderTo:'chartContainer',
  },
  title: {
      text: 'Chart.update'
  },

  subtitle: {
      text: 'Plain'
  },

  xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
      type: 'column',
      colorByPoint: true,
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      showInLegend: false
  }]

})},3000);

另一种方法是，您可以动态创建图表配置对象，并在尝试打印的容器内进行绑定

this.chartConfig = {
 title: {
  text: 'Chart.update'
  },

 subtitle: {
  text: 'Plain'
  },

 xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',    'Oct', 'Nov', 'Dec']
  },

 series: [{
  type: 'column',
  colorByPoint: true,
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  showInLegend: false
  }]
}

在HTMl中，您可以在图表上动态绑定（指令）

---

让我知道你面临的任何错误，你会帮助你解决问题，还是提供好的链接来帮助你战胜@shikhar，继续尝试itHey sir@shikhar，你给出的第一个解决方案实际上是有效的，但仍然出现错误“错误TS2304:找不到名称‘require’”@aldi您可以直接导入，很抱歉提到require方法，对于第二种方法，您需要安装名为“angular highcharts”的npm软件包，请参阅此文件，以便使用相同的angular highcharts，DRY，除非您必须这样做

this.chartConfig = {
 title: {
  text: 'Chart.update'
  },

 subtitle: {
  text: 'Plain'
  },

 xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',    'Oct', 'Nov', 'Dec']
  },

 series: [{
  type: 'column',
  colorByPoint: true,
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  showInLegend: false
  }]
}

 <div eds-tile class="xl-6" style="height: 350px">
<eds-tile-title>Count of Ticket ID by CU ID</eds-tile-title>
<div id="chartContainer">
<chart [options]="chartConfig"></chart>
 </div>
<!-- Highchart On This -->
</div>

chart {
 width: 100% !important;
 margin: 0 auto;
 display: block;
}

.highcharts-root {
  width: 100% !important;
  display: block;
  } 

 .highcharts-container {
   width: 100% !important;
  }