Angular5使用highcharts
title: Angular5使用highcharts
date: 2018-08-03 14:22:11
tags: highcharts angular-highcharts
Angular5中使用highcharts
之前项目中用highcharts绘制图表，所以现在在Angular5中同样使用highcharts
参考于npm中angular-highcharts文档https://www.npmjs.com/package/angular-highcharts
1. 使用npm安装必要的包，一定要注意版本
npm i --save angular-highcharts@5 highcharts@5
npm i --save-dev @types/highcharts
2. 引入必要的模块
在app.module.ts中引入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { ChartModule } from 'angular-highcharts';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,ChartModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }3. 在需要使用highcharts的组件中引入Chart
import {Component} from '@angular/core';
import { Chart } from 'angular-highcharts';
@Component({selector: 'app-root',templateUrl: './app.component.html'
})
export class AppComponent {chart = new Chart({chart: {type: 'line'},title: {text: 'Linechart'},credits: {enabled: false},series: [{name: 'Line 1',data: [1, 2, 3]}]});// add point to chart serieadd() {this.chart.addPoint(Math.floor(Math.random() * 10));}
}4. 在模板中使用chart属性
<div [chart]="chart" style="width: 500px;height: 400px;"></div>
以上其实就形成了一个简单的例子，要绘制复杂图片实现复杂效果，参考highcharts官网。
5. 关于在angular5中使用angular-highcharts绘制热力图，树形图等modules里面额外图表
根据angular-highcharts文档中说明的，具体如下
Using Highcharts modules
To use Highcharts modules you have to import them and provide them in a factory (required for aot). You can find the list of available modules in the highcharts folder ls -la node_modules/highcharts/modules.Hint: Highcharts-more is a exception, you find this module in the root folder. Don't forget to use the modules with the .src suffix, minimized highcharts modules are not importable.
下面还有示例：
// app.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as treemap from 'highcharts/modules/treemap.src';
import * as heatmap from 'highcharts/modules/heatmap.src';
@NgModule({providers: [{ provide: HIGHCHARTS_MODULES, useFactory: () => [ treemap, heatmap ] } // add as factory to your providers]
})
export class AppModule { }
只需要在模块中导入需要使用的额外图表，注意不要导入modules/heatmap，而是要导入heatmap.src，
然后绘制图标区域总共绘制了两个图表，一个普通线性图，一个树形图，具体代码如下：
// html
<div class="wrap">这是主页<div id="chart-box" [chart]="pieChart"></div><div id="heat-box" [chart]="heatChart"></div>
</div>
// ts
import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {pieChart = new Chart({chart: {type: 'line'},title: {text: 'Linechart'},credits: {enabled: false},series: [{name: 'Line 1',data: [1, 2, 3]}]});heatChart = new Chart({colorAxis: {minColor: '#FFFFFF'},series: [{type: 'treemap',layoutAlgorithm: 'squarified',data: [{name: 'A',value: 6,colorValue: 1}, {name: 'B',value: 6,colorValue: 2}, {name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4}, {name: 'E',value: 2,colorValue: 5}, {name: 'F',value: 2,colorValue: 6}, {name: 'G',value: 1,colorValue: 7}]}],title: {text: 'Highcharts Treemap'}});constructor() { }ngOnInit() {}}
然后做到这一步按理应该是可行了，可是保存编译的时候报错了，错误信息为：
ERROR in src/app/routes/home/home.component.ts(33,9): error TS2345: Argument of type '{ colorAxis: { minColor: string; }; series: { type: string; layoutAlgorithm: string; data: { name...' is not assignable to parameter of type 'Options'.Types of property 'series' are incompatible.Type '{ type: string; layoutAlgorithm: string; data: { name: string; value: number; colorValue: number;...' is not assignable to type 'IndividualSeriesOptions[]'.Type '{ type: string; layoutAlgorithm: string; data: { name: string; value: number; colorValue: number;...' is not assignable to type 'IndividualSeriesOptions'.Object literal may only specify known properties, and 'layoutAlgorithm' does not exist in type 'IndividualSeriesOptions'.
大致意思就是Chart(options),里面options的类型不匹配，然后在官方文档中发现这样一句
roubleshooting
If you expiring typing errors while you build/serve your angular app the following could be helpful:// override options type with <any>
chart = new Chart(<any>{ options });
This is very useful when using gauge chart type.
所以最终option的类型改为any就可以了
heatChart = new Chart(<any>{}
Angular5使用highcharts相关推荐
- html使用highcharts绘制饼图,html js highcharts绘制圆饼图表
jquery实现饼状图效果 - 站长素材 var chart; $(function () { var totalMoney=999 var zccw=178 var sycw=821 $(docum ...
- statpot:使用mongo+bootstrap+highcharts做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...
- HighCharts基本使用
一.简叙 HighCharts是一个非常强大的画图插件,在以后的工作汇报,数字展示,它将是一把利器.既然是插件,那么就有它的使用规则,我们只需要遵循它的使用规则,就可以画出我们想要的展示效果了.期待吗 ...
- js图表控件：highcharts的应用(二)
柱状图 前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zhux ...
- HighCharts使用心得
前言: 之前非常早的一个项目中使用过highcharts.感觉挺方便的,图表类型也比較丰富.并且还支持数据的下钻,可是假设投入商业使用的话还会有一些版权的问题,所以后来就使用了EChart.这是百度开 ...
- ASP.NET MVC+HighCharts开发统计图表
HighCharts是开源的Web图表js组件,与D3.js一样,经常用于数据可视化.HighCharts图表类型丰富,功能非常强大,是很好的数据可视化解决方案,其官方网站为:http://www.h ...
- php后台数据显示到前端,php,前端_怎么在javascript中得到后台数据?，php,前端,javascript,highcharts - phpStudy...
怎么在javascript中得到后台数据? 最近在研究在网页中嵌入hightchart的表格 在嵌入时发现需要在javascript中得到后台的一组数据 代码如下 require_once('incl ...
- highcharts与ajax的应用
整理一份完整的例子,以供参考: <1>页面chart.html: <span style="font-size:14px;"><!DOCTYPE HT ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
最新文章
- java pdf转换为png图片（1）
- [CF407B] Long Path
- 让TFS忽略packages文件夹的更改
- C++(14)--面向对象
- 二、噪音大小对使用的影响
- 爱python的胖虾_爱了爱了！0.052 秒打开 100GB 数据，这个Python开源库火爆了！
- C++复习筛法求100以内素数
- 对数坐标归一化_数据标准化/归一化方法（Normalization Method）汇总
- 农大计算机工程,肖德琴-华南农业大学计算机科学与工程系
- Could not get a resource since the pool is exhausted
- java 软件流程图使用什么_流程图怎么画，教你正确使用流程图模板
- Android第一行代码踩坑qwq
- Optimized Cost per Click in Taobao Display Advertising - 淘宝 OCPC 阅读笔记
- Podman一篇就学会
- 华容道3x3的技巧_华容道游戏秘决技巧
- 音视频开发进阶｜第七讲：分辨率与帧率·上篇
- 【cartographer without ros】四、里程计odom数据转换
- Python的几个爬虫代码整理（网易云、微信、淘宝、今日头条）
- 插入排序原理以及C语言实现
- 海思Hi3518EV100开发（1）——Sensor驱动