横坐标为数字:
var chart = new Highcharts.Chart({
chart:{//图表区用于设置图表区的相关属性
renderTo: 'content',//图表放置的容器,一般在HTML中放置一个DIV,获取DIV的id属性
type: 'line',//设置图表样式,可以为line,spline,scatter,splinearea bar,pie,area,column
//defaultSeriesType: 'column',//图表的默认样式
//margin: [21,23,24,54],//整个图表的位置(上下左右的空隙)
marginRight: 130,//右边间距
marginBottom: 25//底部间距
},
title: {//用于图表标题的相关属性
text: 'Monthly Average Temperature',//标题文本内容
x: -20//center设置标题的位置
},
subtitle: {//副标题属性,与title大致相同,因为text选项默认为‘’,即为空,所以默认情况下subtitle默认不显示
text: 'Source: WorldClimate.com',
x: -20//设置副标题的位置
},
xAxis: {//设置图表X轴的相关属性
min : 0
},
yAxis: {//设置图表Y轴的相关属性
title: 'Temperature(°C)',//Y轴名称
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {//数据点提示框,设置当鼠标滑向数据点时显示的提示框信息。
formatter: function(){//回调函数,用于格式输出提示框的显示内容
return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C';
}
},
legend: {//设置图例的相关属性,应该是提示框的位置设置
layout: 'vertical',//显示形式,支持水平horizontal和垂直vertical
align: 'right',//对齐方式
verticalAlign: 'top',//水平的对齐方式
x: -10,
y: 100,
borderWidth: 0
},
series: [{//设置图表中要展示的数据
name: 'Tokyo',//显示数据列的名称。
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {//data在图表中的数据列,可以为数组或者JSON格式的数据
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
注意:就是将xAxis中的最小值改为0就行了,min : 0
横坐标为字符串:
var categories = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];//设置X轴分类名称,是数组
var chart = new Highcharts.Chart({
chart:{//图表区用于设置图表区的相关属性
renderTo: 'content',//图表放置的容器,一般在HTML中放置一个DIV,获取DIV的id属性
type: 'line',//设置图表样式,可以为line,spline,scatter,splinearea bar,pie,area,column
//defaultSeriesType: 'column',//图表的默认样式
//margin: [21,23,24,54],//整个图表的位置(上下左右的空隙)
marginRight: 130,//右边间距
marginBottom: 25//底部间距
},
title: {//用于图表标题的相关属性
text: 'Monthly Average Temperature',//标题文本内容
x: -20//center设置标题的位置
},
subtitle: {//副标题属性,与title大致相同,因为text选项默认为‘’,即为空,所以默认情况下subtitle默认不显示
text: 'Source: WorldClimate.com',
x: -20//设置副标题的位置
},
xAxis: {
tickHeight:5,
min:0,
labels: {
formatter: function (){
return categories[this.value];
},
},
tickInterval : 1
},
yAxis: {//设置图表Y轴的相关属性
title: 'Temperature(°C)',//Y轴名称
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {//数据点提示框,设置当鼠标滑向数据点时显示的提示框信息。
formatter: function(){//回调函数,用于格式输出提示框的显示内容
return '<b>'+ this.series.name +'</b><br/>'+ categories[this.x] +': '+ this.y +'°C';
}
},
legend: {//设置图例的相关属性,应该是提示框的位置设置
layout: 'vertical',//显示形式,支持水平horizontal和垂直vertical
align: 'right',//对齐方式
verticalAlign: 'top',//水平的对齐方式
x: -10,
y: 100,
borderWidth: 0
},
series: [{//设置图表中要展示的数据
name: 'Tokyo',//显示数据列的名称。
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {//data在图表中的数据列,可以为数组或者JSON格式的数据
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
注意:两者就是xAxis处的处理不一样