highcharts 在angular中的使用示例代码

highcharts 在angular中的使用示例代码

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

网址

https://hcharts.cn/demo/highcharts

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

安装依赖

npm install highcharts-ng --save

引入依赖

'highcharts/highcharts.src.js',

'highcharts-ng/dist/highcharts-ng.min.js'

注入依赖

var myapp = angular.module('myapp', ["highcharts-ng"]);

实例

// html

// js

$scope.chartConfig = {

title: {

text: '哈哈哈',

x: -20

},

subtitle: {

text: 'Click and drag to zoom in.',

x: -20

},

xAxis: {

categorihttp://es: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

},

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, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

}, {

name: '伦敦',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

};

结果

Highcharts 基本组成

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。