集成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. c语言程序设计案例教程(第2版)笔记(二)—函数、递归

    零散知识点 模块化:将一个问题分解成若干个子问题的过程成为模块化. 模块化的优点:不但可以将一个复杂的问题分解成几个相对简单的问题:还可以提高程序代码的重用性. 函数:函数是构成C程序的基本单位.函数 ...

  2. DFS Codeforces Round #299 (Div. 2) B. Tavas and SaDDas

    题目传送门 /* DFS:按照长度来DFS,最后排序 */ #include <cstdio> #include <algorithm> #include <cstrin ...

  3. "HIBERNATE_SEQUENCE" does not exist问题处理

    JavaWeb应用在MySQL环境下可以正常运行,数据迁移至Oracle或者人大金仓后应用运行爆出如下错误: 严重: Servlet.service() for servlet [JeeCmsAdmi ...

  4. 关于JTable的使用

    JTable是个JavaSwing中的表格控件,可以用来显示数据和编辑数据.这里讲一下我的使用心得. JavaSwing讲究MVC理念,而这个JTable也可以说是个迷你的MVC模型.JTable只是 ...

  5. 在spring data jpa中使用自定义转换器之使用枚举转换

    转载请注明http://www.cnblogs.com/majianming/p/8553217.html 在项目中,经常会出现这样的情况,一个实体的字段名是枚举类型的 我们在把它存放到数据库中是需要 ...

  6. [转]在 Azure 云服务上设计大规模服务的最佳实践

    本文转自:http://technet.microsoft.com/zh-cn/magazine/jj717232.aspx 英文版:http://msdn.microsoft.com/library ...

  7. .net 字符串和JSON格式的互换

    近期又做了个问卷调查,问卷调查一次性要保存一二十个题目和答案!所以嘞,博主为了偷懒,就直接把答卷内容保存成了Json格式! 好处当然是很多啦! 只需一个字段就能保存整个答卷的内容! 想想都刺激!哈哈~ ...

  8. for循环的两种写法哪个快

    结果如下: 其实工作中,也没有这么多数据需要遍历,基本上用foreach

  9. Spring框架学习-搭建第一个Spring项目

    步骤一:下载Spring开发包. 官网:https://spring.io/           下载地址:https://repo.spring.io/libs-release-local/org/ ...

  10. [BZOJ1088][SCOI2005]扫雷Mine DP

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1088 记录下每一个格子对应左边格子放的雷的情况,然后dp转移就好了. #include&l ...