1、 使用npm安装angular2-highcharts

npm install angular2-highcharts --save

2、主模块中引入 app.module.ts

import {ChartModule} from "angular2-highcharts";
...
imports: [
ChartModule
]
...

3、组件中定义图标配置数据,可在highcharts官网查看配置 app.component.ts

import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
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 }
]
}]
}
}
}

4、模板中加载图像

<chart [options]="options"></chart>

转自:https://segmentfault.com/a/1190000007957170

[转] angular2-highcharts用法详解的更多相关文章

  1. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  2. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  3. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  4. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  5. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  6. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  7. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  8. systemctl命令用法详解

    systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...

  9. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  10. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

随机推荐

  1. Centos 7 chrome

    share from https://www.cnblogs.com/lenmom/p/9195581.html 1. 下载Chrome浏览器的rpm包 https://www.chrome64bit ...

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

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

  3. 二进制流BinaryFormatter存储读取数据的细节测试

    二进制流的使用很方便,为了更好的理解应用它,我创建简单对象开始测试它的增加特性和减少特性. [Serializable] class Data----------开始时候的存储对象 { public ...

  4. EL表达式、JSTL

    EL表达式 一.简介 > JSP表达式 <%= %> 用于向页面中输出一个对象.        > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段.   ...

  5. 最新最强短视频SDK——来自RDSDK.COM

    北京锐动天地信息技术有限公司成立于2007年9月.多年来一直专注于音视频领域核心技术的研发, 拥有Windows.iOS.Android全平台自主知识产权的领先技术产品. 2011年获得新浪战略投资, ...

  6. rabbitmq在storm中使用

    storm中只能进行任务计算,不能保存中间结果,最后结果. 这就有一个需求,保存计算结果,最好还是分布式的,因为storm也是分布式,大数据计算. 流行的分布式计算中使用队列保存数据居多. kafka ...

  7. H.264学习笔记1——相关概念

    此处记录学习AVC过程中的一些基本概念,不定时更新. frame:帧,相当于一幅图像,包含一个亮度矩阵和两个色度矩阵. field:场,一帧图像,通过隔行扫描得到奇偶两场,分别称为顶场和底场或奇场和偶 ...

  8. vue2.0自定义事件

    我们知道父组件是使用props传递数据给子组件,如果子组件要把数据传递回去,怎么办? 那就是要自定义事件!使用v-on绑定自定义事件 每个Vue实例都实现了事件接口(Events interface) ...

  9. 8086汇编——Introduction(8086内部寄存器,段寄存器,存储器分段)

    8086汇编--Introduction 一.8086CPU的三种工作模式 实模式:只有低20位地址线起作用,仅能寻址第一个1MB的内存空间.MS DOS运行于该模式下. 保护模式:在该模式下,机器可 ...

  10. POJ_1125_(dijkstra)

    Stockbroker Grapevine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 35553   Accepted: ...