-1

我正在尝试从我的 Angular 应用程序（使用 Angular 8）中显示 highstock UI（使用 Hightchart 7），但它没有出现。下面，代码。也许，我缺少步骤，缺少配置，缺少一些东西。我在这里查看了其他条目，但该建议并未解决此问题。

下面 angular.json 文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "highchart": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/highchart",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/highcharts/css/stocktools/gui.css",
              "node_modules/highcharts/css/annotations/popup.css"
            ],
            "scripts": [
              "node_modules/highcharts/indicators/indicators-all.js",
              "node_modules/highcharts/modules/drag-panes.js",
              "node_modules/highcharts/modules/annotations-advanced.js",
              "node_modules/highcharts/modules/price-indicator.js",
              "node_modules/highcharts/modules/full-screen.js",
              "node_modules/highcharts/modules/stock-tools.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "highchart:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "highchart:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "highchart:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/highcharts/css/stocktools/gui.css",
              "node_modules/highcharts/css/annotations/popup.css"
            ],
            "scripts": [
              "node_modules/highcharts/indicators/indicators-all.js",
              "node_modules/highcharts/modules/drag-panes.js",
              "node_modules/highcharts/modules/annotations-advanced.js",
              "node_modules/highcharts/modules/price-indicator.js",
              "node_modules/highcharts/modules/full-screen.js",
              "node_modules/highcharts/modules/stock-tools.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "highchart:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "highchart:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "highchart"
}

下面的 package.json 文件

{
  "name": "highchart",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.11",
    "@angular/common": "~8.2.11",
    "@angular/compiler": "~8.2.11",
    "@angular/core": "~8.2.11",
    "@angular/forms": "~8.2.11",
    "@angular/platform-browser": "~8.2.11",
    "@angular/platform-browser-dynamic": "~8.2.11",
    "@angular/router": "~8.2.11",
    "highcharts": "^7.2.0",
    "highcharts-angular": "^2.4.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.12",
    "@angular/cli": "~8.3.12",
    "@angular/compiler-cli": "~8.2.11",
    "@angular/language-service": "~8.2.11",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

在 app.module.ts 文件下方

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 app.component.html 文件下方

<div>
  <highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [constructorType]="stockChart"
  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>
</div>

在 app.component.ts 文件下方

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_stock from 'highcharts/modules/stock';
HC_stock(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'highchart';
  Highcharts: typeof Highcharts = Highcharts;

  ohlc: any = [
                [1508765400000, 156.89, 157.69, 155.5, 156.17],
                [1508851800000, 156.29, 157.42, 156.2, 157.1],
                [1508938200000, 156.91, 157.55, 155.27, 156.41],
                [1509024600000, 156.29, 157.42, 156.2, 157.1], 
                [1509111000000, 156.25, 157.45, 156.25, 157.15]
              ];
  volume: any = [
                  [1508765400000, 21207100],
                  [1508851800000, 17757200], 
                  [1508938200000, 21984300], 
                  [1509024600000, 17757200], 
                  [1509111000000, 21207100]
                ];

  chartOptions = {
    yAxis: [{
        labels: {
            align: 'left'
        },
        height: '80%',
        resize: {
            enabled: true
        }
    }, {
        labels: {
            align: 'left'
        },
        top: '80%',
        height: '20%',
        offset: 0
    }],
    series: [{
        type: 'candlestick',
        id: 'aapl-ohlc',
        name: 'AAPL Stock Price',
        data: this.ohlc
    }, {
        type: 'column',
        id: 'aapl-volume',
        name: 'AAPL Volume',
        data: this.volume,
        yAxis: 1
    }],
    stockTools: {
      gui: {
          enabled: true
      }
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 800
            },
            chartOptions: {
                rangeSelector: {
                    inputEnabled: false
                }
            }
        }]
      }
    };
}
4

2 回答 2

1

我找不到库存工具模块的初始化，所以这可能是个问题。

在您的图表组件中：

import * as Highcharts from "highcharts/highstock";
import * as HIndicatorsAll from "highcharts/indicators/indicators-all";
import * as HDragPanes from "highcharts/modules/drag-panes";
import * as HAnnotationsAdvanced from "highcharts/modules/annotations-advanced";
import * as HPriceIndicator from "highcharts/modules/price-indicator";
import * as HFullScreen from "highcharts/modules/full-screen";
import * as HStockTools from "highcharts/modules/stock-tools";

HIndicatorsAll(Highcharts);
HDragPanes(Highcharts);
HAnnotationsAdvanced(Highcharts);
HPriceIndicator(Highcharts);
HFullScreen(Highcharts);
HStockTools(Highcharts);

此外，将样式添加到应用程序的主样式文件中styles.css。

演示：

于 2019-10-23T10:57:13.967 回答
0

显然，Highcharts 版本 7 中发生了一些变化。当您尝试使用导入指令导入这些库时，会出现以下错误消息。

消息错误：

This expression is not callable.
  Type 'typeof import("/Users/tritan/Documents/highchart/node_modules/highcharts/modules/drag-panes")' has no call signatures.

我找到了一种解决方案，请检查以下代码版本：

declare var require: any;
import { Component } from '@angular/core';
import * as Highcharts from "highcharts/highstock";
import * as HIndicatorsAll from "highcharts/indicators/indicators-all";
const HDragPanes = require("highcharts/modules/drag-panes");
import * as HAnnotationsAdvanced from "highcharts/modules/annotations-advanced";
const HPriceIndicator = require("highcharts/modules/price-indicator");
const HFullScreen = require("highcharts/modules/full-screen");
const HStockTools = require("highcharts/modules/stock-tools");

HIndicatorsAll(Highcharts);
HDragPanes(Highcharts);
HAnnotationsAdvanced(Highcharts);
HPriceIndicator(Highcharts);
HFullScreen(Highcharts);
HStockTools(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'highchart';
  Highcharts: typeof Highcharts = Highcharts;

  ohlc: any = [
                [1508765400000, 156.89, 157.69, 155.5, 156.17],
                [1508851800000, 156.29, 157.42, 156.2, 157.1],
                [1508938200000, 156.91, 157.55, 155.27, 156.41],
                [1509024600000, 156.29, 157.42, 156.2, 157.1], 
                [1509111000000, 156.25, 157.45, 156.25, 157.15]
              ];
  volume: any = [
                  [1508765400000, 21207100],
                  [1508851800000, 17757200], 
                  [1508938200000, 21984300], 
                  [1509024600000, 17757200], 
                  [1509111000000, 21207100]
                ];

  chartOptions = {
    yAxis: [{
        labels: {
            align: 'left'
        },
        height: '80%',
        resize: {
   ..........
于 2019-10-23T13:29:48.193 回答