HighCharts 图形报表小试

最新推荐文章于 2024-07-10 14:03:37 发布

一渣程序猿

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量1.1k

点赞数

分类专栏： HighCharts 文章标签：图形报表 HighCharts javascript 报表

本文链接：https://blog.csdn.net/leiyong0326/article/details/37814897

版权

HighCharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目需要用到,自己做了一个小小的试验,所以大多数据没有参数化,代码中用到次刻度双刻度尺,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 οnclick="showChart()">show</button>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

示例下载地址: 点击打开链接
执行效果: