在线绘制网址
需要添加常用资源3个
JSP代码
var chart = Highcharts.chart('container',{
chart: {
type: 'column',
style:{
fontFamily:18
},
},
title: {
text: '三种方法数据集加载时间对比'
},
xAxis: {
categories: [
'O(1)','O(2)','O(3)','O(4)','O(5)'
],
title: {
text: '数据集'
},
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '加载时间/s',
align: 'high',
offset: 0,
rotation: 0,
y: -10
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 1
}
},credits: {
enabled: false
},
series: [{
name: '方法1',
data:[5,8,11,13,17]
},{
name: '方法2',
data: [52,114,176,250,336]
},{
name: '方法3',
data: [49,92,123,192,278]
}],
colors: [
'#2f7ed8', '#8bbc21','#FF9655'],
});
HTML代码
<div id="container" style="min-width:400px;height:400px"></div>
运行结果如下:
绘制这一类型的图表需要修改的地方有 横纵坐标标题(xAxis、yAxis)、图表标题(title)、数据集(series)等。
并可导出为文件
修改坐标轴字体
xAxis: {
categories: [
'Oil(1)','Oil(2)','Oil(3)','Oil(4)','Oil(5)'
],
title: {
text: '数据集',
style: {
//color: 'red',
fontSize: '16px',
fontWeight: 'bold'
}
},
crosshair: true,
labels: {
style: {
//color: 'green',
fontSize: '14px',
fontWeight: 'bold'
}
}
}
修改图表标题
title: {
text: 'Q(1)查询时间对比',
style: {
//color: 'red',
fontSize: '18px',
fontWeight: 'bold'
}
}