Highcharts使用（插件类） 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"]);

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();