您的位置：首页 > 其它

HighCharts 图形报表小试

2014-07-15 14:53 260 查看
项目需要用到,自己做了一个小小的试验,所以大多数据没有参数化,代码中用到 次刻度 双刻度尺,highCharts源码部分可参考另一篇文章: HighCharts 改源码,添加次刻度尺

<pre name="code" class="html"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="../../js/jquery-2.1.0.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
//创建报表
function createCharts(type,title,subtitle,xCcategories,yTitle,objs) {
//重写日期格式化方法
Highcharts.dateFormats = {
<span style="white-space:pre">			</span>//W%参数获取week
W: function (timestamp) {
var date = new Date(timestamp),
day = date.getUTCDay() == 0 ? 7 : date.getUTCDay(),
dayNumber;
date.setDate(date.getUTCDate() + 4 - day);
dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
return 1 + Math.floor(dayNumber / 7);
},
<span style="white-space:pre">			</span>//X%参数获取月份
X: function (timestamp) {
var date = new Date(timestamp);
return date.getMonth()*1+1;
}
}
$('#container').highcharts({
//每个曲线颜色
colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
type: type,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
plotShadow: true,
//背景渐变色,反差大便于理解
stops: [
[0, '#cccccc'],
[1, '#003033']
]
},
style: {
fontFamily: "'Unica One', sans-serif"
},
plotBorderColor: '#cccccc'
},
title: {
text: title
},
subtitle: {
text: subtitle
},
xAxis: {
reversed: false ,//是否从大到小显示(刻度)
showFirstLabel: true,//是否显示第一个刻度
showLastLabel: true,//是否显示最后一个刻度
gridLineWidth: 0,//格子线条
lineColor: '#000',
tickColor: '#000',//线轴刻度
//categories: xCcategories
type: 'datetime',//时间类型
opposite: false,//顶端显示
secTickInterval: true,
tickInterval: 7 * 24 * 36e5, //多久一个刻度
plotLines:[{
color:'#cccccc',            //线的颜色，定义为红色
dashStyle:'longdashdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
//value:3,                //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
width:2                 //标示线的宽度，2px
}],
offset:0,//与Y轴间隔
labels: {
format: '{value:%Y-%X-%e}',//格式化时间
align: 'center',
overflow: 'justify',
rotation: -30//label旋转角度
}
},
yAxis: [{
//gridLineWidth: 1,//格子线条
minorTickInterval: 2.5,//内容线条
minorTickLength: 0,
//tickInterval: 15,//间隔值
tickLength: 20,//刻度尺长度
secTickInterval: true,
//minTickInterval:50,
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,//线轴刻度
tickColor: '#000',
title: {
text: yTitle
},
max: 100,//最大值
min: 0,//最小值
maxPadding: 2.9,
labels: {
overflow: 'justify',
step:1,//间隔多少个显示一次
staggerLines: 2,//X轴最多几层显示
rotation:0,//旋转
formatter: function() {
return this.value +'ml'
},
style: {
color: '#dd6564',
fontWeight: 'bold'
},
x: -10,//坐标轴偏移
y: -2

},
//标识区域
plotBands:[{
color:'red',           //线的颜色，定义为红色
//dashStyle:'solid',     //默认值，这里定义为实线
//width:2,               //标示线的宽度，2px
from:20,
to:40
}]
},{
lineWidth: 1,
opposite: true,
showEmpty: false
}],
tooltip: {
crosshairs: true,
shared: true,
dateTimeLabelFormats: {
day:'<b>%Y-%X-%e</b>'//格式化时间,粗体
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',//刻度显示位置
borderWidth: 0
},
plotOptions: {
spline: {
marker: {
radius: 2,//点的半径
lineColor: '#666666',
lineWidth: 1
}
}
},
series: objs
});
};

function showChart(){
var xCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var series = new Array();
var obj = new Object();
var obj1 = new Object();
obj.name = 'Tokyo';
obj.marker = new Object();
obj.marker.symbol = 'diamond';//线条点的样式
//测试数据
obj.data = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(../../graphics/sun.png)'
}
}, 23.3,7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,25.6,23.3, 21.5, 25.2,25.6,23.3,25.6,23.3 ];
obj.pointStart = Date.UTC(2013, 0, 3);<span style="font-family: Arial, Helvetica, sans-serif;">//开始时间</span>
obj.pointInterval = 1 * 24 * 36e5;<span style="font-family: Arial, Helvetica, sans-serif;">//每条数据间隔时间,e5据我研究是代表5个0的意思</span>
obj1.name = 'London';
obj1.marker = new Object();
obj1.marker.symbol = 'square';
obj1.data = [3.6, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 60.8,3.6, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6,
60.8,60.8];
obj1.pointStart = Date.UTC(2013, 0, 3);
obj1.pointInterval = 1 * 24 * 36e5;
obj.yAxis=0;<span style="font-family: Arial, Helvetica, sans-serif;">//指向yAxis数组的第几个配置</span>
obj1.yAxis= 1;
obj1.visible= false;//不显示刻度尺
series.push(obj,obj1);
var json = JSON.stringify(series);//转为json格式,是为了测试后台传入json转为对象直接使用.
createCharts('spline','Monthly Average Temperature','Source: WorldClimate.com',xCategories,'Temperature',$.parseJSON(json));//将json转回对象

}
</script>
</head>
<body>
<script src="../../js/highcharts.src.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script src="../../js/modules/json2.js"></script>
<button onclick="showChart()">show</button>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>



示例下载地址:点击打开链接

执行效果:

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航