[转] angular2-highcharts用法详解
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用法详解的更多相关文章
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- @RequestMapping 用法详解之地址映射
@RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- mysql中event的用法详解
一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- c++中vector的用法详解
c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- systemctl命令用法详解
systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...
随机推荐
- quickpow || 快速幂
洛谷例题 推荐自行脑补:百度百科 如果 ,那么 : 前言:快速幂就是快速算底数的n次幂.其时间复杂度为 O(log₂N), 与朴素的O(N)相比效率有了极大的提高. 拿题目样例 Input :2 1 ...
- IE6 position:fixed bug hack方式
/* IE6浏览器的特有方法 */ /* 修正IE6振动bug */ * html,* html body{background-image:url(about:blank);background-a ...
- 数据结构 - 静态单链表的实行(C语言)
静态单链表的实现 1 静态链表定义 静态链表存储结构的定义如下: /* 线性表的静态链表存储结构 */ #define MAXSIZE 1000 /* 假设链表的最大长度是1000 */ typede ...
- tomcat 修改端口
修改tomcat端口号: a) 去tomcat安装目录(或者解压目录)下的“conf”文件夹中找到文件“server.xml”(本例:“D:\Program Files\Apache Software ...
- Kali linux 2016.2(Rolling) 的详细安装(图文教程)附安装VMare Tools 增强工具
写在前面的话 因读研期间,实验室团队需要,所以,接触上了Kali Linux,需去获得网络安全方面的数据,即数据和信息收集.以便为后续的数据处理和分析,准备! 用到hadoop和spark.机器学习等 ...
- URAL1326. Bottle Taps(状压)
1326 用队列优化的 不知道为什么一直WA 传统直白的 状压 写了超时 O((1<<n)*m*n) 之后想了可以把n省去 预处理一下方案 #include <iostream&g ...
- 升级 Cocoapods 到1.2.0指定版本,降低版本及卸载
=====================升级版本=================== CocoaPods 1.1.0+ is required to build SnapKit 3.0.0+. 在 ...
- 30款jQuery常用网页焦点图banner图片切换
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- 网盘资源搜索的一些知识 C#
针对互联网盘上的资源进行搜索查找.写一个网盘资源搜索的要点主要有以下几点. 1.这个网盘资源搜索的原理就是利用互联网搜索引擎的site 命令. 其次就是针对网页链接进行提取以及处理. 首先就是编写一个 ...
- 用RecyclerView做一个小清新的Gallery效果
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...