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

翻译|使用教程|编辑:吴园园|2020-02-27 16:28:29.280|阅读 77 次

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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

点击下载Highcharts最新试用版

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

开源图表库Highcharts教程:使用Angular和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拖放图表

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

# install highcharts-angular and highcharts
npm 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正版授权的朋友可以咨询慧都官方客服



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/blog/tutorials/drag-and-drop-charts-with-angular-and-highcharts/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat