highcharts 在angular中的使用

网址

https://segmentfault.com/q/10...
https://www.hcharts.cn/demo/h...
https://github.com/pablojim/h...

安装依赖

npm install highcharts-ng --save

引入依赖

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

注入依赖

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

实例

// html
<highchart class="chart" config="chartConfig" class="span9" ></highchart>

// 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 基本组成

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!