集成highchart的配置困扰了我很久,今天终于解决了:

1.修改tsconfig.app.json:

"compilerOptions": {
//...
"types": ["node"]
//...
}
2.安装angular2-highcharts库:

npm install angular2-highcharts --save
3.module中引入highchart
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {ChartModule} from "angular2-highcharts";
import * as highcharts from 'highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
declare var require: any;
export function highchartsFactory() {
const hc = require('highcharts');
const dd = require('highcharts/modules/drilldown');
dd(hc);
return hc;
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ChartModule
],
providers: [{
provide: HighchartsStatic,
useFactory: highchartsFactory
}],
bootstrap: [AppComponent]
})
export class AppModule { }
4.使用highchart:
4.1 app.component.html:
<chart [options]="options"></chart>
 
4.2 app.component.ts:
export class AppComponent {
title = 'app';
options:Object;
constructor() {
this.options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
data: [
{ name: 'Microsoft Internet Explorer', y: 56.33 },
{ name: 'Chrome', y: 24.03 },
{ name: 'Firefox', y: 10.38 },
{ name: 'Safari', y: 4.77 },
{ name: 'Opera', y: 0.91 },
{ name: 'Proprietary or Undetectable', y: 0.2 }
]
}]
}
}
}
 
 

angular2集成highchart的更多相关文章

  1. Karma 5:集成 Karma 和 Angular2

    集成 Karma 和 Angular2 我们需要做很多工作,由于需要使用 TypeScript 进行开发,首先需要正确配置 Typescript ,然后正确配置对 Angular2 的引用.还要创建 ...

  2. Angular2/Ionic2集成Promact/md2.md

    最近想找一套比较完整的基于Material风格的Angular2的控件库,有两个选择一个是Angular官方的Material2,但是这套库的DatePicker控件目前只能支持年月日,不支持时分秒, ...

  3. angular2与VS2015 asp.net core集成使用

    首先,需要在VS2015环境下更新到update2,并安装asp.net core环境,并安装Node.js插件. 新建asp.net core项目: 此时,需要先新建npm配置文件,如图: 并定义n ...

  4. Angular2,React集成

    https://www.packtpub.com/books/content/integrating-angular-2-react http://www.syntaxsuccess.com/view ...

  5. 最新Angular2案例rebirth开源

    在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...

  6. Highchart插件简介和引入方式

    一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...

  7. [译]Angular2 和TypeScript -- 一次简要的预览

    原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted o ...

  8. Abp集成Swagger的最佳实践

    1.在项目中添加nuget包 Abp.Web.Api.SwaggerTool 2.在项目Abp模块的DependsOn添加AbpWebApiSwaggerToolModule Run It,启动项目, ...

  9. Angular2案例rebirth开源

    Angular2案例rebirth开源 在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于 ...

随机推荐

  1. SpringBoot项目docker化

    前言 有很多种方案构建Docker镜像,包括Dockerfile构建.maven插件构建,这里我使用了最简单的Dockerfile构建的. 一.安装Docker 我的虚拟机系统是CentOS7,需要是 ...

  2. Golang 在 Linux CentOS 6.5 服务器上实现 博客后台程序开机启动

    在linux下想实现开机启动的方法很多,这里我采用了在/etc/rc.local里写shell指令的方式. 以下就以我的实际操作为例子讲述,很多地方需要看官自己调整信息哦! 1.在/etc/rc.lo ...

  3. _bzoj1010 [HNOI2008]玩具装箱toy【斜率优化dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1010 裸的斜率优化,第一次写队首维护的时候犯了个智障错误,队首维护就是维护队首,我怎么会那队 ...

  4. 01背包(分组) HDOJ 4341 Gold miner

    题目传送门 题意:有n个金矿,每个金矿有抓取的消耗的时间和价值,矿工在原点,问在T时间内能得到的最大的价值 分析:唯一和01背包不同的是金矿可能共线,也就是抓取近的金矿后才能抓后面共线的金矿.这是分组 ...

  5. Matlab调用C程序 分类: Matlab c/c++ 2015-01-06 19:18 464人阅读 评论(0) 收藏

    Matlab是矩阵语言,如果运算可以用矩阵实现,其运算速度非常快.但若运算中涉及到大量循环,Matlab的速度令人难以忍受的.当必须使用for循环且找不到对应的矩阵运算来等效时,可以将耗时长的函数用C ...

  6. Struts2 表单提交与execute()方法的结合使用

    1.创建web项目,添加struts2支持的类库,在web.xml中配置struts2过滤器. 2.创建名为UserAction的Action对象,并在其中编写execute()方法,代码如下所示: ...

  7. windows deintall 12c client

    1.unintall: close all oracle app C:\app\client\CICadmin\product\12.1.0\client_1\deinstall deinstall ...

  8. 面相切面编程AOP以及在Unity中的实现

    一.AOP概念 AOP(Aspect-Oriented Programming,面向切面的编程),它是可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术.它是 ...

  9. java自动包装与解包

    关于java的自动包装机制想必大家都用过吧,一般这些机制都用于在往容器中存储基本类型数据的时候,因为容器中不允许存在基本数据类型,所以就会调用自动包装机制,将基本数据类型转换为对象,将基本数据保存在对 ...

  10. LN : leetcode 646 Maximum Length of Pair Chain

    lc 646 Maximum Length of Pair Chain 646 Maximum Length of Pair Chain You are given n pairs of number ...