Highcharts使用（插件类）

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

Highcharts 英文网： http://www.highcharts.com/
Highcharts 中文网：http://www.hcharts.cn/

一、基本组成：

1、Highcharts包含标题（Title）：主标题是必须的但是subTTitle不是必须
2、坐标轴（Axis）：有x坐标（xAxis）和y坐标（yAxis）
3、数据列（Series）：每个曲线，每个柱形条组，每个饼图的部分
4、数据提示框（Tooltip）：鼠标放上去的提示框
5、图例（Legend）：通过点击标示可以显示或隐藏该数据列
6、版权信息（Credits）：一般是highcharts的官网，指定credits.enabled=false不让显示
7、导出功能按钮（Exporting）：需要包含exporting.js
8、标示线（PlotLines）：主动添加如平均线等

Highcharts组成 Highcharts组成

二、常用Highcharts 图表类型

line 直线图、spline 曲线图、area 面积图、areaspline 曲线面积图、arearange 面积范围图、column 柱状图、bar 条形图、pie 饼图、scatter 散点图、bubble气泡图、gauge 仪表图

三、常用配置

lineColor: '#000', //线的颜色
lineWidth: 0.5,  //线的粗细
marker: {//如果不设置marker，每个图例的形状是自动随机生成的，有圆的有方的，样式不统一
                     symbol: "circle",//设置图例形状
                      lineWidth: 3,//设置图例的大小
                      fillColor: '#ee3124',//图例外围的颜色
                      lineColor:'#ee3124'//图例中心的颜色
               }

四、highcharts 在angular1中的应用

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

<highchart config="chartConfig"></highchart>

var setChart = function () {
             return {
                   options: {
                         chart: {
                              type: 'spline'
                                   },
                          title: {
                               text: name,
                               align: 'left',
                               x: 0,
                               style: {
                                    fontSize: '12px'
                                         }
                               },
                           credits: {
                                enabled: false
                                },
                            tooltip: {
                                  backgroundColor: '#666',
                                  borderWidth: 0,
                                  shadow: false,
                                  style: {
                                       color: '#fff'
                                      }
                                  },
                               legend: {
                                      enabled: false
                                  }
                             },
                    series: [{
                         name: 'cpu',
                                    fillColor: {
                                                  linearGradient: {x1: 0, y1: 1, x2: 0, y2: 0}, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
                                                  },
                                       lineColor: '#000', //线的颜色
                                       lineWidth: 0.5,  //线的粗细
                                       fillOpacity: 0.6,
                                       marker: {  //数据节点显示
                                       enabled: true
                                         },
                                        yAxis: 1,
                                        data:[100,200,300,400],
                                        pointStart: times + 3600 * 1000,
                                        pointInterval: 15 * 60 * 1000 //时间间隔
                                         }],
                                       xAxis: {}

                 $scope.chartConfig = setChart();