研究了一天的highcharts插件终于实现了原型要求的效果,记录下来备用:
html代码如下:
<table id="project_list"></table>
js代码如下:
//图表生成
function report_charts(){
var category=[];
for(var i=30;i>=0;i-=5){
category.push(global_tool_getdate(-i).substring(5));
}
$('#charts_id').highcharts({
title: {
text: null//去图表标题(顶部)
},
chart:{
spacing:50//图表外框的内边距,上下左右留50px,相当于css的padding:50px来理解
},
xAxis: {
categories: category,//x坐标的日期值数组
tickmarkPlacement: 'on',//实现文字显示在竖线下,见<1>
title: {
enabled: false
}
},
yAxis: {
title: {
text: null//去除y坐标的文字提示
},
min: 0//实现y坐标从0开始算,默认从5开始算
},
plotOptions: {
line: {
marker: {
enabled: false//去掉节点的显示,见<4>
}
}
},
tooltip: {
valueSuffix: '元'//设置提示信息里的单位,见<2>
},
legend: {//折线提示定位,见<3>
layout: 'vertical',
align: 'left',
verticalAlign:'top',
borderWidth: 0
},
series: [{
name: '近30日趋势',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 51.5,23] //数据提供
}]
});
}
js代码如下:
//图表生成
function report_charts(){
var category=[];
for(var i=30;i>=0;i-=5){
category.push(global_tool_getdate(-i).substring(5));
}
$('#charts_id').highcharts({
title: {
text: null
},
chart:{
spacing:50
},
xAxis: {//不设置tickmarkPlacement: 'on',默认文字在2个竖线中间,见<3>
categories: category,
},
yAxis: {
title: {
text: null
},
min: 0
},
plotOptions: {
line: {
dataLabels: {
enabled: true//节点显示,见<1>
},
enableMouseTracking: false//鼠标移到节点上不显示提示信息,见<2>
}
},
tooltip: {
valueSuffix: '元'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign:'top',
borderWidth: 0
},
series: [{
name: '近30日趋势',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 51.5,23]
}]
});
}
还有如果要去掉图片右下角默认的http://www.highcharts.com链接,打开highcharts.js文件搜索 http://www.highcharts.com
找到credits:{enabled:!0,text:"",href:"",的text和href值变成""就可去掉链接