Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。
1设置图例不可点击
plotOptions: {
pie: {
point: {
events: {//设置图例点击不可用
legendItemClick: function () {
return false;
}
}
},
showInLegend: true,
},
},
2绘制直线及显示右侧纵坐标
2绘制直线及显示右侧纵坐标
yAxis: [{
max : 100,
min : valuemin,
title:{
text:''
},
labels: {
format: '{value}',
style: {
color: '#89A54E'
},
formatter:function(){
return this.value+"%";
}
},
plotLines: [
{
color: '#000',
dashStyle: 'Solid', //Dash,Dot,Solid,默认Solid
width: 2,
value: 值,
},
}
]
,
3设置柱子宽度及柱子可点击(返回被点击柱子的名称)
6顶端叠加 各个序列的值
3设置柱子宽度及柱子可点击(返回被点击柱子的名称)
plotOptions: {
column: {
pointPadding: 0, //两条数据的间距
borderWidth: 0,
pointWidth: 10 ,
},
series: {
events: {
click: function (e) {
window.CMSZ.showEachMonthData(e.point.category);
}
}
},
},
4设置横坐标可点击( 返回被点击横坐标的值)
5横坐标的文字竖直显示(将横坐标的值传入该函数)},
4设置横坐标可点击( 返回被点击横坐标的值)
xAxis: [{
categories: xvalueList,
labels:
{//生成可以点击的<a>横坐标
useHTML: true,
formatter: function () {//添加showProvinceDetails(province)函数
return '<a style="text-decoration:none; href="#" οnclick="showProvinceDetails(\'' + this.value +'\');">' +flip(this.value) + '</a>';
}
}
}],
function flip(province){
var str = province.charAt(0);
for( var j = 1; j < province.length; j++){
str = str + '<br/>' + province.charAt(j);
}
return str;
}
6顶端叠加 各个序列的值
plotOptions: {
column: {
pointPadding: 0, //值越小,每列间的距离就会越小,柱子就会越大
borderWidth: 0,
//同一x下不同对象的柱子的距离
},
series: {
stacking: 'true',//
顶端叠加
各个序列的值
},
},
如何传递参数到highchart中,请看
传递参数到highchart:http://blog.csdn.net/bitian123/article/details/51396207