angular2集成highchart

集成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:

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 }

]

}]

}

转载于:https://www.cnblogs.com/ihzeng/p/8859300.html

angular2集成highchart相关推荐

java angular2集成_Angular2整合其他插件的方法
前言:现在有很多朋友在接触Angular2的时候,总是不可避免的会使用一些其他的第3方的插件,而这些插件可能都是基于jQuery的,而且也没有对应的angular2的版本,这里我就来讲解一下,在这种情 ...
angular2集成手写签名
项目中设计到审核功能,在审核的时候需要审核人进行一个签名,这里使用的angular2-signaturepad,集成的时候可以使用npm安装 npm install angular2-signatur ...
组件分享之前端组件——甘特图时间表时间线日历组件
组件分享之前端组件--甘特图时间表时间线日历组件背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组 ...
SpreadJS 在 Angular2 中支持绑定哪些属性？
SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...
入门系列之在Ubuntu上安装Drone持续集成环境
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小铁匠米兰的v 发表于云+社区专栏介绍 Drone是一个流行的持续集成和交付平台.它集成了许多流行的版本控制存储库服务,如GitHu ...
最新Angular2案例rebirth开源
在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...
在Ubuntu上安装Drone持续集成环境
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小铁匠米兰的v 发表于云+社区专栏介绍 Drone是一个流行的持续集成和交付平台.它集成了许多流行的版本控制存储库服务,如GitHu ...
Angular2快速入门-1.创建第一个app
一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作 1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位,下 ...
Angular2 之 Animations
Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画. Angular2的动画主要是和@Component结合在了一起. animations元数据属性在 ...

angular2集成highchart

angular2集成highchart相关推荐

最新文章

热门文章