彩票走势图

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

点击下载Highcharts最新试用版

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

让我们开始吧🙂

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

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

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

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

# install highcharts-angular and highcharts
npm install highcharts-angular highcharts

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

import * as Highcharts from 'highcharts';

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

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

npm install @angular/cdk

这是我们如何添加两个模块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"
    }    
  };
}

<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正版授权的朋友可以