最近在做大量的统计展示,用到了Highcharts,Highcharts 是一个用纯JavaScript编写的一个图表库,简单易用
在http://www.runoob.com/highcharts/highcharts-tutorial.html网站能在线体验
网站内容挺详细的,但是还有一部分的属性没有列出来,本文用一个柱状图+线形图的组合图标作为例子分享给大家,具体属性有相应的备注
function demo(){
var chart = {
zoomType: 'xy'
};
var subtitle = {//子标题
text: ''
};
var title = {//主标题
text: ''
};
var xAxis = {
categories: ,//x坐标标签
crosshair: true
};
var yAxis= [{ // 第一条Y轴
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true//该属性决定了两个Y轴的左右顺序
}, { // 第二条Y轴
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}];
var tooltip = {
shared: true
};
var legend = {
layout: 'horizontal',
align: 'center',//介绍标签水平位置
verticalAlign: 'top',//介绍标签垂直位置
borderWidth: 0,
y:15//介绍标签Y轴位置调整,单位px
};
var exporting = { enabled: false };//是否显示右上角的打印栏,默认true显示
var series= [{
name: '',//属性名
type: 'column',//图表类型 //可选,默认为line-line:折线;spline:平滑的线;area:折线、下边有颜色块儿;areaspline:平滑的线、下边有颜色块儿;column:柱状图;bar:横向条形图;pie:饼图;scatter:点状图;
yAxis: 1,
data: ['x','y'],
tooltip: {
valueSuffix: ''
}
}, {
name: '',//属性名
type: 'line',//图表类型
data: ['a','b'],//数据
color:'#cccdfe',//颜色
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
];
var plotOptions = {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
};
var json = {};
json.plotOptions = plotOptions;
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.exporting = exporting;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#id').highcharts(json);
}