标签: angular2-highcharts

我正在失去理智和头发.我在Angular 2中导入HighCharts但需要一些额外的库.到目前为止,我的代码中有

import {ChartModule} from 'angular2-highcharts';
@NgModule({
....
imports:[
ChartModule.forRoot(require('highcharts'), require('highcharts/modules/drilldown'))})
]

但我一直收到这个错误

ERROR in Error遇到静态解析符号值.调用函数'ChartModule'.不支持函数调用.考虑使用对导出的fucntion的引用替换函数或lambda.

所以我试过了

export function highchartsRequire:any {
   return{
     require('highcharts'), 
     require('highcharts/modules/drilldown')
   }
}
...
ChartModule.forRoot(highchartsRequire())

仍然无法正常工作.有任何想法吗？

使用角度2角度cli:1.0.0-beta.30

更新 - 感谢JayChase让它部分运作

这有效

export function highchartsFactory() {
      return require('highcharts');

    }

但我一次不能要求两个

declare var require: any;
export function highchartsFactory() {
  return function () {
    require('highcharts');
    require('highcharts/modules/drilldown')
  };
}

@NgModule({
  imports: [
    ChartModule
  ],
  providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
  ],

有任何想法吗？谢谢.

当我尝试在Angular中实现以下plunkr时,我收到以下错误消息.

Property 'series' does not exist on type 'Object'.

http://plnkr.co/edit/OQSFSKisIIWAH0megy4d?p=preview

我安装了"angular2-highcharts":"^ 0.5.5",输入"@ types/highcharts":"^ 5.0.5",

任何帮助,将不胜感激.

我想使用highcharts中的spiderweb图表,这需要我更多地导入highcharts,但我无法弄清楚如何做到这一点.目前,这就是我将highcharts添加到我的项目中的方式,来自app.module.ts:

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as Highcharts from 'highcharts/highstock';

imports: [
    ChartModule
]

providers: [{
    provide: HighchartsStatic,
    useValue: Highcharts
}],

当我尝试像这样导入它时:

import * as HighchartsMore from 'highcharts/highcharts-more';

我收到以下错误:

Module '"c:/pdws-view-v2/node_modules/@types/highcharts/highcharts-more"' resolves to a non-module entity and cannot be imported using this construct.

有任何想法吗？

我想防止在已配置的面积图的y轴上显示十进制值。

当我的图表最初显示所有系列显示时，我看到：

But after filtering out some of the series to show, I see the y axis start showing decimal values like so:

My yAxis config is as follows:

yAxis: {
            gridLineColor: 'transparent',
            allowDecimals: false,
            type: 'logarithmic',
            minorTickInterval: 1,
            lineWidth: 0,
            gridLineWidth: 0,
            minorGridLineWidth: 0
        },

I wondered if this had something to do with being a logarithmic scale, but when I comment out the type option to revert to using a default scale, it makes no difference, I observe …

我想在angular2应用程序中插入实时图表,我正在使用angular2-highcharts.

npm install angular2-highcharts --save

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'app works!';
  options: Object;
  constructor() {
    this.options = {
      title : { text : 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2],
      }]
    };
  }

}

app.component.html

<chart [options]="options"></chart>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } …

我使用angular2-highcharts,我想在本地函数中调用组件方法,但我不知道它是如何可能的.

你可以帮帮我吗 ？一个吸引人的例子:http://plnkr.co/edit/gOLGytp9PZXiXvv2wv1t？p = preview

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"></chart>`
})
class AppComponent {
    constructor() {
        this.options = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title : { text : 'simple chart' },
            plotOptions: {
                series: {
                    turboThreshold:3000,
                    cursor: …

＃尝试了导入模块的新方法。（app.module.ts）。在app.module中导入了更多模块。在组件中也有带有rilldown的json structre。仍无法在页面上呈现

   " import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
    import more from 'highcharts/highcharts-more.src';
    import exporting from 'highcharts/modules/exporting.src';"

   ## Refer : https://github.com/manhar-developer/angularwidCharts

    ----------------------------------------------------------------------

   ###  - Component Code :

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

    declare var require: any;
    const Highcharts = require('highcharts');
    export class LineChartComponent implements OnInit {

      constructor() { }
    chart1 = new Chart({
        // Created pie chart using Highchart
        chart: {
          type: 'pie',
          options3d: {
              enabled: true,
              alpha: 45
          }
      }, …

我正在尝试使用 highcharts 和 highcharts-angular 生成组织结构图。但是，它在加载组织结构图模块时抛出以下错误。

organization.js:9 Uncaught TypeError: Cannot read property 'prototype' of undefined
at organization.js:9
at e (organization.js:9)
at organization.js:9
at Module../src/app/my-network-chart/my-network-chart.component.ts (my-network-chart.component.ts:9)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (app.component.ts:8)
at __webpack_require__ (bootstrap:78)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:78)
at Object.0 (main.ts:12)

我做错了什么吗？我正在使用相同的代码来生成网络图表，并且它没有任何问题。我只在组织结构图中面临这个问题。

加载组织图：

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

加载网络图表：在这种情况下没有问题

import { Component, OnInit } from '@angular/core';
import * as Highcharts from …

我想启用“noData”功能，默认情况下，当图表中没有要显示的数据时，它会显示一条消息。它在他们的文档中说该功能需要将文件no-data-to-display.js加载到页面中。

我的 node_modules/highcharts 文件夹中已经有了这个文件，但我不确定我应该如何从那里加载它，所以我也想知道如何做到这一点。现在，我通过将这个脚本标签添加到我的index.html：

<script src="http://code.highcharts.com/modules/no-data-to-display.js"></script> 

它给了我以下错误：

Uncaught ReferenceError: Highcharts is not defined
    at no-data-to-display.js:10
    at no-data-to-display.js:10

这是我的所有 highcharts 相关内容 app.module.ts

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as Highcharts from 'highcharts';

imports: [
    ChartModule,
],
providers: [{
    provide: HighchartsStatic,
    useValue: Highcharts
}]

谢谢。

编辑：

我试图在我的app.module.ts：

import HighchartsNoDataToDisplay from 'highcharts/modules/no-data-to-display.src.js';

我不确定下一步是什么。将 HighchartsNoDataToDisplay 添加到导入数组会给我一个错误。

我在本地使用以下highcharts依赖项：

• “角高图”：“ 5.2.12”
• “ highcharts”：“ 6.1.0”
• “ @ types / highcharts”：“ 5.0.19”

这是我的源代码的现场演示，

首先，我想指出的是，highCharts的noData功能的用法和启用是非常阴暗的。关于如何正确使用它，没有适当的指导。

现在谈到这个问题，几天前，我意识到有必要显示适当的“无可用数据”消息，而不是显示空白图表。我进行了一些研究，发现可以在高级图表中启用它，并在纯JavaScript中找到了可行的演示。那么现在我们如何在Angular 5中使用它呢？那需要更多的研发，最后我弄清楚了，

import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';
...    
@NgModule({
  ...
  providers: [
  { provide: HIGHCHARTS_MODULES, useFactory: () => [noDataToDisplay] }
]

（注意：^^这种方法不适用于链接的stackBlits演示，不知道为什么！）

我确实使用上述方法成功地在我的仓库中启用了它，但是它并不健壮，也就是说，它看起来并不一致。

接下来，我想动态切换noData消息，即以编程方式对其进行更新，因此尝试了以下方法：

const options = this.chartConfig.ref.options;
  options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
this.chartConfig.ref.update(options, true);

当您从图例框中切换系列的可见性时，这种方法确实起作用了，但是现在看来，这似乎也不起作用。我有以下问题，

1. 在angular 5中使用noData选项的正确方法是什么
2. 如何确保它始终显示？可能使用setData（[]）或setData（null）之类的不同配置使它始终出现，但是我无法找出其不一致背后的根本原因。
3. 如何动态切换noData消息。

另外，如果有任何我可以改善的地方，请提前告知我。

PS我确实设法找到了有关使用纯JavaScript实现功能的小提琴，但还无法使用有角度的图表来实现。这是小提琴似乎正在使用的附加代码。

if (!chart.hasData()) {
    chart.hideNoData();
    chart.showNoData("Your custom error message");
}

这些方法可能不适用于我正在使用的highcharts版本。

感谢@Pandiyan修复了stackBlitz导入的问题。

更新： …

我遇到了问题，无法呈现 TreeMap 图表。其他图表类型（如 Line）在我的应用程序中运行良好。我得到的错误是错误#17。我使用的是 Angular 5。你能分享任何使用 Angular5 和 Highcharts for TreeMap 的工作示例吗？

感谢您的快速帮助。