HighCharts使用总结
1、常用属性
chart：
type:areaspline(线面图)、arearange（区间图）
zoomType: 缩放类型（沿着'xy'轴缩放）
alignTicks:设置坐标轴刻度对齐。 当有多个坐标轴时，设置坐标轴刻度的对其方式（通过自动计算还是不需要计算）。
color: 'rgba(68, 170, 213, 0.1)' 颜色的透明色设置
style:CSS样式
设置文字颜色、字体、字号，但是字体的对齐则使用algin、x和y元素。比如： { "color": "#333333", "fontSize": "18px" }
Axis(x轴和y轴)：
type：轴类型 （datetime，日期时间）
gridLineWidth：网格线的粗细
alternateGridColor：网格之间的过度填充色
plotBands：区间带（比如1.5至3.5之间是什么颜色）
tickInterval: 标记间隔（7 * 24 * 3600 * 1000, // 一周）
minRange:最小区间 （14 * 24 * 3600000 // 14天）
opposite:是否对立面显示坐标轴，比如图表双轴的时候
plotOptions：用来设置所有数据序列的公共对象。
series.cursor：鼠标类型
series.point.events.：鼠标点事件
spline.pointInterval:3600000 点位间隔（毫秒，一小时）
area：设置图形区域的渐变颜色
pie.size:圆形图和环形图相对于图表区的大小，做小的“圆形图和环形图”的时候可以用到。
marker:数据的标记点
tooltip：提示窗 （需要开启 enableMouseTracking: true）
valueSuffix：单位后缀
shared: true （多数据序列是否共享提示窗）
headerFormat: 提示框中标题行的HTML代码，默认值(<span style="font-size: 10px">{point.key}</span><br/>)。变量被花括号包起来。可用的变量有point.key, series.name, series.color和其它从点对象point和series 对象中的成员。
pointFormat:提示框中该点的HTML代码，默认值 <span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>.
footerFormat: 字符串形式定义提示框中的注脚格式。
useHTML:是否用HTML取代svg展示ToolTip标签。
labels小数点位数：
labels: {
format: '{y:.2f} %'( 没有Y值) {value:.4f} %（有Y值）
}
实例：tooltip: {
borderColor: '#0000AA',
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
//pointFormat: '<tr><td style="padding:0">{series.name}: </td>' +
//'<td style="padding:0"><b>{point.y:.1f} kWh</b></td></tr>',
//footerFormat: '</table>',
//useHTML: true,
valueDecimals:2,
shared: true,
valueSuffix: 'kWh'
},
series：数据序列
dashStyle: 'shortdot' （虚线）
marker：数据标记点
legend:图例
layout：垂直图例还是水平图例
borderWidth：边框线
backgroundColor：背景颜色
align：水平位置
verticalAlign：垂直位置
设置标题不同的颜色样式：
var title_style = "<span style='color:#ff0'>Monthly</span> <span style='color:red'> Average Temperature </span>";
title: {
text: title_style,
x: -20, //center
useHTML:true,
},
2、HightChart
3、HighStock
上下多坐标轴： [{labels: {align: 'right',
x: -3
},
title: {
text: '温度(℃)'
},
height: '30%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '湿度（%）'
},
top: '35%',
height: '30%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '照度(Lux)'
},
top: '70%',
height: '30%',
offset: 0,
lineWidth: 2
}]
4、Highmap
实例地址：http://jsfiddle.net/tfxudL9z/3/
做世界地图等，可以使用内置的地图或GeoJSON，而自定义地图分为以下几个步骤。
（1）制作svg文件，可以使用“SVGDeveloper”。
（2）http://www.highcharts.com/studies/map-from-svg.htm#http://www.highcharts.com/maps/maps/test.svg 通过这个网址，将 svg文件转化为 highmap支持的json文件。
（3）用Highmap载入json文件，显示地图。
5、Treemap
数据节点父子关系，可以设置向下钻取也可以不设置。
allowDrillToNode：是否向下钻取
虽然还有其它很多图表插件，比如：echarts、fusioncharts、kcharts等。 但是，还是感觉Highcharts的渲染效果比较好，看起来漂亮。 有一点不好，就是灵活性大，官方的参考实例比较少，文档看英文有点费劲。
6、JS类库引用
modules 里面是 扩展功能类库，已经引入highcharts.js，再开发maps、treemaps，只需引入map.js、treemap.js等。
"highstock.js"包含"highcharts.js" 的主要功能，同时在一个页面里面使用highstock和highcharts，只需要引入"highstock.js" 和 "highcharts-more.js"。
7、“load”和“redraw”事件重设数据点的宽度等（除了使用属性，还要使用回调函数修改属性不能修改的图表部分）
var changeWidth = function(chart) {
Highcharts.each(chart.series[0].data, function(p, i) {
var width = p.graphic.element.width.animVal.value - 1;
p.graphic.attr({
width: p.y,
transform: 'translate(' + (width - p.y) / 2 + ',0)'
});
});
};
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var chart = this;
changeWidth(chart);
},
redraw: function() {
var chart = this;
changeWidth(chart);
}
}
}}
案例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> b{font-size: 25px;} </style> </head> <script src="jquery.min.js"></script> <script src="highcharts.js"></script> <script src="charttest.js?ver=1900"></script> <body> <h2> 设计图</h2> <img src="chart.jpg" height="310" width="800"> <ul> <li><h1>有哪些坑？？？和常规图表有哪些不同</h1></li> <li><b>1、一个数据点有两个label???</b></li> <li><b>2、colmn柱形图渐变而且每根柱子的透明度在增加</b></li> <li><b>3、x轴坐标左边线对齐，不是居中，也不是正对着线</b></li> <li><b>4、最后一根柱子是前面柱子宽度的两倍</b></li> <li><b>5、最后一根柱子后面分割线不见了</b></li> <p><h1>My god,这些基本配置搞不定了，怎么办？？？</h1> <img src="chartapi.jpg" height="1050" width="700"> </p> <p><h1>答：可以使用图表的重绘回调函数，有那么好用吗？那么多图表元素渲染后都是些什么？ Highcharts并没有给出说明，怎么办？ 猜！</h1> <img src="chartapi2.jpg" height="300" width="700"> </p> </ul> <h2> 做出来的图表</h2> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <p><a href="博客地址">博客地址</a><a href="http://jsfiddle.net/starrycheng/dL6rebf5/19/">jsFiddle地址</a></p> </body> </html>
$(function() {
var secondDataLabel = function(chart) { // on complete
$('.secondDataLabel').remove();
var points = chart.series[0].points,
plotLeft = chart.plotLeft,
plotHeight = chart.plotHeight,
plotTop = chart.plotTop;
Highcharts.each(points, function(p, i) {
//设置渐变
p.graphic.element.style.opacity = 0.1 + 0.05 * i;
var element = p.graphic.element,
width = element.width.animVal.value;
//设置最后一个柱子的宽度
if (i === (points.length - 1)) {
p.graphic.attr({
width: width * 2 + 2
});
//移动最后一个数据点dataLable的位置
p.dataLabel.translate(parseInt(element.attributes[0].value) + plotLeft + width - p.dataLabel.padding - p.dataLabel.width / 2, p.dataLabel.y);
chart.renderer.label('L' + i, parseInt(element.attributes[0].value) + plotLeft + width - p.dataLabel.padding, plotHeight + plotTop - 25)
.attr({
'text-anchor': 'middle',
zIndex: 6
})
.css({
color: '#697D91',
fontSize: '14px'
}).addClass('secondDataLabel')
.add();
} else {
//移动每个数据点的位置
chart.renderer.label('L' + i, parseInt(element.attributes[0].value) + plotLeft + (width / 2) - p.dataLabel.padding, plotHeight + plotTop - 25)
.attr({
'text-anchor': 'middle',
zIndex: 6
})
.css({
color: '#697D91',
fontSize: '14px'
}).addClass('secondDataLabel')
.add();
}
});
},
//移动X坐标轴Label的位置
positionLabels = function(chart) {
var xAxis = chart.xAxis[0];
xAxis.labelGroup.attr({
'transform': 'translate(' + (-xAxis.slotWidth / 2) + ',-6)'
});
},
//删除最后两个格子线
deleteGridElements = function(chart) {
var xAxis = chart.xAxis[0],
gridElements = xAxis.gridGroup.element.children;
gridElements[gridElements.length - 2].remove();
gridElements[gridElements.length - 2].remove();
},
//删除x轴上最后两个刻度
deleteTick = function() {
var ticks = $('.highcharts-axis')[0].children;
ticks[ticks.length - 4].remove();
},
loadOrRedrawChart = function(chart, load) {
secondDataLabel(chart);
positionLabels(chart);
};
$('#container').highcharts({
chart: {
events: {
load: function() {
loadOrRedrawChart(this);
deleteTick();
deleteGridElements(this);
},
redraw: function() {
loadOrRedrawChart(this);
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
shadow: false
},
column: {
dataLabels: {
enabled: true,
// format: '<span style="color:#FC7946;font-size:14px;">{point.y}</span><span style="color:#FC7946;font-size:10px;">%</span>',
useHTML: true,
format: '{y:.2f} %',
style: {
fontSize: '14px',
color: '#FC7946'
}
},
borderWidth: 0,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#55ACEE'],
[1, '#FFFFFF']
]
},
}
},
credits: {
enabled: false
},
yAxis: {
gridLineWidth: 0,
max: 7,
title: null,
labels: {
enabled: false
}
},
xAxis: {
max: 9,
showLastLabel: false,
gridLineColor: '#D8E2E9',
gridLineDashStyle: 'shortdash',
gridLineWidth: 1,
categories: [
'第1天',
'第8天',
'第14天',
'第28天',
'第61天',
'第91天',
'第112天',
'第153天',
'第183天',
],
labels: {
align: 'left',
style: {
color: '#9DACB6',
fontSize: '12px',
}
}
},
series: [{
type: 'column',
name: '收益',
data: [4.2, 4.4, 4.6, 4.8, 5.0, 5.2, 5.4, 5.6, 5.8]
}]
});
});
阶梯柱形图：http://jsfiddle.net/starrycheng/dL6rebf5/19/
空心饼图：
http://jsfiddle.net/starrycheng/pnh4ek94/6/
http://jsfiddle.net/6w9js32j/12/
$(function() {
//将标签扩展到Legend
(function(H) {
H.wrap(H.Legend.prototype, 'render', function(proceed) {
// Run original proceed method
proceed.apply(this, [].slice.call(arguments, 1));
// 绘制线
this.chart.renderer.path(['M', -10, 16, 'L', -10, -16 + this.legendHeight])
.attr({
'stroke-width': 1,
stroke: '#D8E2E9'
})
.add(this.group);
//绘制高
this.chart.renderer.label('高', -20, 10)
.css({
color: '#4595CA'
})
.attr({
fill: '#fff',
padding: 4,
r: 10,
zIndex: 6,
stroke: '#4595CA',
'stroke-width': 1
})
.add(this.group);
//绘制低
this.chart.renderer.label('低', -20, -30 + this.legendHeight)
.css({
color: '#F69279'
})
.attr({
fill: '#fff',
padding: 4,
r: 10,
zIndex: 6,
stroke: '#F69279',
'stroke-width': 1
})
.add(this.group);
});
}(Highcharts));
// let loadOrRedrawChart=(chart)=>{
// // let x=chart.legend.group.translateX;
// // let y=chart.legend.group.translateY;
// // let height=chart.legend.legendHeight;
// // chart.renderer.path(['M', x-26, y+16, 'L', x-26, y-16 + height])
// // .attr({
// // 'stroke-width': 1,
// // stroke: '#D8E2E9'
// // })
// // .add(this.group);
// // chart.renderer.label('高', x-13, y+8)
// // .css({
// // color: '#4595CA'
// // })
// // .attr({
// // fill: '#fff',
// // padding: 4,
// // r: 10,
// // zIndex: 6
// // })
// // .add();
// }
var title = "<span style='width:80px;text-align:center;display:inline-block;'>借款人</span><br/><span style='width:80px;text-align:center;display:inline-block;'>信用等级</span>"
Highcharts.getOptions().plotOptions.pie.colors = ['#628BD5', '#5CA6F4', '#80CBFD', '#ACE9F6', '#C7EEB2', '#FFCB85', '#F69279'];
$('#container').highcharts({
chart: {
type: 'pie'
// events: {
// load: function() {
// loadOrRedrawChart(this);
// },
// redraw: function() {
// loadOrRedrawChart(this);
// }
// }
},
title: {
text: title,
align: 'center',
verticalAlign: 'middle',
y: -4,
x: -50,
style: {
fontSize: '15px',
color: '#697D91'
},
useHTML: true
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
x: 15,
y: 0,
itemMarginTop: 3,
itemMarginBottom: 3,
itemStyle: {
color: '#697D91'
},
labelFormat: '{name} {y:.2f}%'
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
plotOptions: {
pie: {
borderWidth: 0,
innerSize: '65%',
allowPointSelect: false,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: true
},
series: [{
data: [
['A级', 10],
['B级', 20],
['C级', 20],
['D级', 20],
['E级', 20],
['F级', 15],
['G级', 5]
]
}]
});
});
