开源图表库Highcharts教程：使用Angular和Highcharts拖放图表

无论您是要创建仪表板还是其他带有浮动图表的应用程序，Angular都可以轻松地以拖放方式移动图表。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

在本快速教程中，您将学习如何创建一个如下图所示的项目

让我们开始吧

对于此项目，我们正在使用以下技术：

• Angular CDK angular/cdk 8.2.3.
• Highcharts V8.0.0.
• Highcharts-Angular.

使用Angular应用程序环境和工作区通过以下设置来设置项目：

• node 6.10.2+
• npm 4.6.1+
• angular/cli 6.0.0+

该项目分为以下标准文件体系结构：

接下来是highcharts-angular和Highcharts库的安装：

# install highcharts-angular and highchartsnpm install highcharts-angular highcharts

Highcharts允许我们访问highcharts库，highchats-angular是官方的角度包装器。要使用这些软件包，必须导入它们。因此，在文件中，我从highcharts-angleular包中导入了模块。app.module.tsHighchartsChartModule

import { HighchartsChartModule } from 'highcharts-angular'; @NgModule({  imports: [    ...    HighchartsChartModule

在文件中，这样导入Highcharts：app.component.ts

import * as Highcharts from 'highcharts';

我们还必须从Angular Component Development Kit（CDK）安装@ angular / cdk / drag-drop软件包。该软件包是该项目的核心，因为它包含使用API轻松创建具有完全灵活性的拖放界面的功能。

这是安装最新版本的CDK的命令行：

npm install @angular/cdk

安装软件包后，我们可以将其主要模块添加并集成到angular应用程序中。

这是我们如何添加两个模块Highcharts-angular和DragDropModuleinapp.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { HelloComponent } from './hello.component';import { HighchartsChartModule } from 'highcharts-angular';import { DragDropModule } from '@angular/cdk/drag-drop';@NgModule({  imports:      [ BrowserModule, FormsModule,HighchartsChartModule ,DragDropModule],  declarations: [ AppComponent, HelloComponent ],  bootstrap:    [ AppComponent ]})export class AppModule { }

现在，让我们为测试创建一些图表。让我们在此演示中使用折线图和条形图。app.component

我们将通过访问API使用highcharts实例来自定义图表

import { Component } from "@angular/core";import * as Highcharts from "highcharts";@Component({  selector: "my-app",  templateUrl: "./app.component.html",  styleUrls: ["./app.component.css"]})export class AppComponent {  Highcharts = Highcharts;  linechart = {    series: [      {        data: [1, 2, 3]      }    ],    chart: {      type: "line"    },    title: {      text: "linechart"    }  };  barchart = {    series: [      {        data: [1, 2, 3]      }    ],    chart: {      type: "bar"    },    title: {      text: "barchart"    }   };}

最后，将HTML代码段添加到中：app.component.html

<div class="example-box" cdkDrag><highcharts-chart  [Highcharts]="Highcharts"  [options]="linechart"  style="width: 100%; height: 400px; display: block;" &gt</highcharts-chart></div&gt<div class="example-box" cdkDrag><highcharts-chart  [Highcharts]="Highcharts"  [options]="barchart"  style="width: 100%; height: 400px; display: block;" ></highcharts-chart></div>

希望本教程对您有所帮助。如果您有任何疑问或意见，欢迎在评论区留言。

想要购买Highcharts正版授权的朋友可以咨询官方客服

标签：