彩票走势图

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

点击下载Highcharts最新试用版

在本入门教程中，您将学习如何创建具有交互式报表功能的Angular应用程序。作为数据可视化工具，您将使用Highcharts（一个多平台图表库）和Flexmonster Pivot（一个JavaScript组件），该组件将获取原始数据，进行处理并将其显示在数据透视表网格上。表格和图表可视化相结合，构成了一个高级分析仪表板。

本教程是您掌握数据可视化和Angular开发技能的绝好机会。

以下是一些可以完成本教程的实际原因：

• 您将学习如何构建依赖于高级数据可视化组件的动态报告应用程序。
• 最终的项目将允许其最终用户实时挖掘数据并执行自助服务分析。

要成功完成本教程，请在计算机上安装以下工具：

• Node.js的本地开发环境。
• Angular CLI。

您将不使用理论数据，而是使用经验数据。即，您将设置一个报告仪表板，以通过交互式可视化工具探索COVID大流行趋势。

您可以互换使用任何其他数据集。但是请注意，在这种情况下，您应该根据数据集的字段名称来调整报表的结构。

这是到目前为止我们选择的数据集列表：

• 约翰霍普金斯大学（covid_19_clean_complete.csv）提供的数据，其中包括截至2020年1月22日来自不同国家的COVID-19 确诊，死亡和康复病例的累计计数。它可用于探索美国或其他国家/地区案件的时间动态。
• 由约翰·霍普金斯大学提供的美国确诊病例数据（johns_hopkins_csse / 2019-novel-coronavirus-covid-19-2019-ncov-data-repository-confirmed-cases-in-the-us.csv）。它可以用于按州跟踪案件的总数。

储存资料

让我们决定仪表板应如何访问数据。
让我们在src / assets目录中创建一个数据文件夹，我们将在其中存储CSV数据文件。

通过数据可视化思路进行思考

主要目标是关注美国的每日/每周/每月COVID动态。为此，仪表板将包含多个数据可视化组件：

• 两个数据透视表汇总了来自不同数据源的数据。
• 显示每个州已确诊病例数的总谱图。
• 一个气泡图，用于报告不同国家中正在发生和已恢复的病例数。
• 用于报告美国案件每两周/每周/每月动态的折线图。

首先，使用Angular CLI创建一个新的Angular项目：

ng new report-app

cd reporting-app
ng serve --open

安装Highcharts模块

将Highcharts软件包安装到您的应用中：

npm install highcharts --save

使用单个npm命令安装Flexmonster Angular模块：

npm install ng-flexmonster

import { FlexmonsterPivotModule } from 'ng-flexmonster';
@NgModule({
  ...
  imports: [FlexmonsterPivotModule],
  ...
})

"scripts": [: [
  "node_modules/flexmonster/lib/flexmonster.highcharts.js""node_modules/flexmonster/lib/flexmonster.highcharts.js"
]]

@import“ flexmonster / flexmonster.min.css” “ flexmonster / flexmonster.min.css”

import * as Flexmonster from 'flexmonster'; * as Flexmonster from 'flexmonster';
import { FlexmonsterPivot } from 'ng-flexmonster';import { FlexmonsterPivot } from 'ng-flexmonster';

由于组件是Angular的基本构建块，因此让我们遵循面向组件的方法，并为将来的仪表板创建一个单独的组件。为此，请在目录内创建一个仪表板文件夹。接下来，在此文件夹中创建三个文件：src/app

• Dashboard.component.ts：实现配置数据透视表和图表以及它们之间的交互的所有逻辑。
• Dashboard.component.html：描述仪表板的组件如何在页面上呈现。
• Dashboard.component.css：包含组件的样式。

import { Component, OnInit, ViewChild } from '@angular/core'; { Component, OnInit, ViewChild } from '@angular/core';
import { FlexmonsterPivot } from 'ng-flexmonster';import { FlexmonsterPivot } from 'ng-flexmonster';
import * as Highcharts from 'highcharts';import * as Highcharts from 'highcharts';

const HC_map = require("highcharts/modules/map"); HC_map = require("highcharts/modules/map");
HC_map(Highcharts);(Highcharts);
require("./js/usamap")(Highcharts);require("./js/usamap")(Highcharts);

为该类定义一个组件装饰器，并为其提供配置元数据：

@Component({({
  selector: 'app-dashboard',: 'app-dashboard',
  templateUrl: './dashboard.component.html',: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']: ['./dashboard.component.css']
})})

export class DashboardComponent implements OnInit { class DashboardComponent implements OnInit {
}}

@ViewChild("pivot") pivot: FlexmonsterPivot;("pivot") pivot: FlexmonsterPivot;
@ViewChild("pivot2") pivot2: FlexmonsterPivot;@ViewChild("pivot2") pivot2: FlexmonsterPivot;
ngOnInit(): void {}(): void {}

这是如何为数据透视表定义简单报告的示例：

public pivotReport = { pivotReport = {
  dataSource: {: {
    filename: "./assets/data/covid_19_clean_complete.csv": "./assets/data/covid_19_clean_complete.csv"
  },},
  slice: {: {
    rows: [{: [{
      uniqueName: "Date",: "Date",
      filter: {: {
        query: {: {
          last: "month",last: "month",
        },},
      },},
    }, ],}, ],
    columns: [{: [{
        uniqueName: "Country/Region",: "Country/Region",
        filter: {: {
          members: ["country/region.[us]"],: ["country/region.[us]"],
        },},
      },},
      {{
        uniqueName: "[Measures]",: "[Measures]",
      },},
    ],],
    measures: [{: [{
        uniqueName: "Active",: "Active",
        aggregation: "sum",: "sum",
      },},
      {{
        uniqueName: "Recovered",: "Recovered",
        aggregation: "sum",: "sum",
      }}
    ],],
  },},
};};

您可以根据想要获得的见解来尝试测量，汇总和字段。

创建图表

由于图表依赖于数据透视表中的汇总数据，因此在创建图表之前，表本身应完成数据处理并进行渲染。

为了跟踪这一时刻，我们将为数据透视reportcomplete事件创建处理程序，并在稍后在中创建组件模板时附加它们：dashboard.component.html

  onFirstReportComplete(): void {(): void {
    this.pivot.flexmonster.off("reportcomplete");this.pivot.flexmonster.off("reportcomplete");
    this.createLineChart();this.createLineChart();
    this.createBubbleChart();this.createBubbleChart();
  }}

  onSecondReportComplete(): void {(): void {
    this.pivot2.flexmonster.off("reportcomplete");this.pivot2.flexmonster.off("reportcomplete");
    this.createMap();this.createMap();
  }}

例如，以下是您如何定义一个负责绘制折线图的函数的方法：

createLineChart(): void {(): void {
  this.pivot.flexmonster.highcharts.getData({this.pivot.flexmonster.highcharts.getData({
      type: "line",: "line",
    },},
    function(chartConfig) {function(chartConfig) {
      Highcharts.chart(Highcharts.chart(
        "linechart-container", < Highcharts.Options > chartConfig"linechart-container", < Highcharts.Options > chartConfig
      ););
    },},
    function(chartConfig) {function(chartConfig) {
      Highcharts.chart(Highcharts.chart(
        "linechart-container", < Highcharts.Options > chartConfig"linechart-container", < Highcharts.Options > chartConfig
      ););
    }}
  ););
}}

创建组件的模板

<fm-pivot #pivot [toolbar]="true" [width]="'100%'" [height]="500" [report]="pivotReport" (reportcomplete)="onFirstReportComplete()"> #pivot [toolbar]="true" [width]="'100%'" [height]="500" [report]="pivotReport" (reportcomplete)="onFirstReportComplete()">
</fm-pivot></fm-pivot>
<fm-pivot #pivot2 [toolbar]="false" [width]="'100%'" [height]="500" [report]="reportUSA" (reportcomplete)="onSecondReportComplete()"><fm-pivot #pivot2 [toolbar]="false" [width]="'100%'" [height]="500" [report]="reportUSA" (reportcomplete)="onSecondReportComplete()">
</fm-pivot></fm-pivot>
<div id="linechart-container"></div><div id="linechart-container"></div>
<div id="bubblechart-container"></div><div id="bubblechart-container"></div>
<div id="map-container"></div><div id="map-container"></div>

打开并定义如何定位可视化组件。将指令用于表格，将div容器用于图表。dashboard.component.htmlfm-pivot

(reportcomplete)="onFirstReportComplete()"–此行代码表示如果reportcomplete触发此事件，onFirstReportComplete则调用该函数。

注意处理程序的reportcomplete附加方式。事件必须用括号括起来，而所有输入属性都必须用方括号括起来。在其API参考中详细了解数据透视表的输入属性和事件。
打开，然后在此处导入仪表板组件：app.module.ts

import { DashboardComponent } from './dashboard/dashboard.component'; { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({({
  ….….
  declarations: [AppComponent, DashboardComponent],: [AppComponent, DashboardComponent],
  ….….
})})

为了能够从主页导航到仪表板，请建立一个路由模块。在创建文件中：src/appapp-routing.module.ts

import { {
  NgModuleNgModule
} from "@angular/core";} from "@angular/core";
import {import {
  RouterModule,RouterModule,
  RoutesRoutes
} from "@angular/router";} from "@angular/router";
import {import {
  DashboardComponentDashboardComponent
} from "./dashboard/dashboard.component";} from "./dashboard/dashboard.component";

const appRoutes: Routes = [{const appRoutes: Routes = [{
    path: "dashboard",: "dashboard",
    component: DashboardComponent: DashboardComponent
  },},
  {{
    path: '**',: '**',
    redirectTo: 'dashboard': 'dashboard'
  }}
];];

@NgModule({@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],: [RouterModule],
})})
export class AppRoutingModule {}export class AppRoutingModule {}

在中，添加指令：app.component.htmlRouterOutlet

<router-outlet> </ router-outlet>

import { AppRoutingModule } from "./app-routing.module"; { AppRoutingModule } from "./app-routing.module";

@NgModule({({
  ........
  imports: [BrowserModule, FlexmonsterPivotModule, AppRoutingModule],: [BrowserModule, FlexmonsterPivotModule, AppRoutingModule],
  ........
})})

仪表板的布局完成后，让我们注意颜色和字体。例如，您可以为图表使用Roboto字体和以下颜色：“＃00A45A”，“＃DF3800”，“＃FFB800”，“＃6D3BD8”，“＃0075FF”。您可以了解有关如何将自定义主题应用于图表的更多信息。

结果

让我们再次运行该应用程序，看看我们新的网络分析解决方案：
ng serve
打开http：// localhost：4200 /或http：// localhost：4200 /仪表板：

现在，您已经拥有一个带有报告仪表板的简单Angular应用程序。Flexmonster Pivot充当我们的仪表板的引擎，从而处理所有数据处理并将现成的数据传递到图表。高图通过交互式图形突出显示了数据的重要方面。
您已准备好开始向最终用户交付该应用程序。应用程序的主要好处是每个人都可以与之交互，保存报告并获得独特的见解。这就是该仪表板与静态报告解决方案的区别所在。

代码和现场演示demo

出于演示目的，该代码以其简化版本提供。仅给出主要亮点。查看Angular仪表板的完整代码。