highcharts 在angular中的使用示例代码

前端之家收集整理的这篇文章主要介绍了highcharts 在angular中的使用示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了highcharts 在angular中的使用示例代码分享给大家。具体如下:

网址

https://www.hcharts.cn/demo/highcharts

https://github.com/pablojim/highcharts-ng

安装依赖

引入依赖

注入依赖

实例

// js
$scope.chartConfig = {
title: {
text: '哈哈哈',x: -20
},subtitle: {
text: 'Click and drag to zoom in.',xAxis: {
categories: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
},yAxis: {
title: {
text: '温度 (°C)'
},plotLines: [{
value: 0,width: 1,color: '#808080'
}]
},tooltip: {
valueSuffix: '°C'
},legend: {
layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0
},series: [{
name: '东京',data: [7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
},{
name: '纽约',data: [-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]
},{
name: '柏林',data: [-0.9,0.6,3.5,8.4,13.5,18.6,17.9,14.3,9.0,3.9,1.0]
},{
name: '伦敦',data: [3.9,4.2,8.5,11.9,15.2,16.6,14.2,10.3,6.6,4.8]
}]
};

结果

Highcharts 基本组成

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章