Highcharts 折线统计图

最新推荐文章于 2021-06-08 10:20:29 发布

麻辣小布叮

最新推荐文章于 2021-06-08 10:20:29 发布

阅读量818

点赞数

分类专栏：时间轴设置折线统计图

本文链接：https://blog.youkuaiyun.com/luobing_csdn/article/details/66969832

版权

时间轴设置同时被 2 个专栏收录

1 篇文章

订阅专栏

折线统计图

1 篇文章

订阅专栏

本文详细介绍了如何使用Highcharts配置一个动态折线图，包括数据加载、全局参数设置、坐标轴定制、图例隐藏及导出功能禁用等。通过具体代码示例展示了如何设置时间格式、刻度线样式及提示框格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="./js/highcharts.js"></script>
		<script type="text/javascript" src="./js/modules/exporting.js"></script>
		
		<script type="text/javascript">
		$(function (){
		var datas="[[1377532800000,4388.00],[1377619200000,4388.00],[1377705600000,4799.00],[1379347200000,4699.00],[1381680000000,4588.00],[1383840000000,4488.00],[1384099200000,4388.00],[1385308800000,4288.00],[1385913600000,4188.00],[1386604800000,4088.00],[1386777600000,3988.00],[1387123200000,4088.00],[1387728000000,4088.00]]";
		
		
	    //也可以使用这种方法   $('#container').highcharts({ });
  		
  		
  		//设置全局参数
  		Highcharts.setOptions({
			global : {
				useUTC : false
			}
		});

  		var chart=new Highcharts.Chart({
  			chart: {
                renderTo: 'container',
                type: 'line',
                margin:[20,10,50,60]
            },
 			colors: [
                  '#ff0000',
                  '#50B432',
                  '#ED561B',
                  '#DDDF00',
                  '#24CBE5', 
                  '#64E572',
                  '#FF9655',
                  '#FFF263',
                  '#6AF9C4'
 			 ],
 			loading:{
				 hideDuration:1000,
				 showDuration:1000
			 },
           title: {
               text: '',
               x: -20 
           },
           subtitle: {
               text: '',
               x: -20
           },
			global : { 
				 useUTC : false
			}, 
           xAxis: {
				//reversed :true,
				type: 'datetime',
				dateTimeLabelFormats: { 
					second: '%H:%M:%S',
					minute: '%H:%M',
					hour: '%H:%M',
					day: '%e. %b',
					week: '%e. %b',
					month: '%b \'%y',
					year: '%Y'
			    },
				//startOfWeek:3,
				//maxZoom: 14 * 24 * 3600000, // fourteen days
				//offset:0.05,
				//opposite:false,
				//tickPosition:'outside',
				//minorTickInterval: 'auto',//设置是否出现纵向小标尺  
				//minorGridLineColor:'#E0E0E0', 
				maxPadding : 0.05,
				minPadding : 0.05,	
				tickInterval :7*24 * 3600000,//两天画一个x刻度
                               //或者150px画一个x刻度，如果跟上面那个一起设置了，则以最大的间隔为准
				//tickPixelInterval : 150,
				tickWidth:1,//刻度的宽度
				//tickColor : 'rgb(192,192,192)',//自定义刻度颜色
						//自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示  
				//lineColor :	'#ff0000',//Z轴线的颜色
                lineWidth :1,//自定义x轴宽度
				//showLastLabel: true,
				endOnTick:false,
				//showFirstLabel: false,
				startOnTick: true,
			    gridLineColor:'rgb(192,192,192)',
				gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线  
				labels: {
					//maxStaggerLines:2,
				    //staggerLines: 2,
					step: 1,
					//rotation:45,
	 				align: "center",
					/*format:	  Highcharts.dateFormat('%Y-%m-%d', '{value}')*/
					formatter: function() {
								   return  Highcharts.dateFormat('%m-%d', this.value); 
					} 
               } 
				
			},
           yAxis: {
				startOnTick:false,
				endOnTick:false,
				tickPixelInterval:25,
				tickColor : '#008000',
				tickWidth :5,
                title: {
                   text: ''
               },
				//minorGridLineColor: '#C5EEFA',
				//minorTickInterval: 'auto',
			   gridLineDashStyle: 'shortdash',		   //longdash
               plotLines: [{
                   value: 0,
                   width: 1,
                   color: '#808080'
               }],
				lineColor:'rgb(192,192,192)',
				lineWidth:1
				//labels:{
					// x : 25
				//}
           },
			
           tooltip: {
				borderColor:'#ff0000',
				borderWidth:2,
				style:{color:'#ff0000'},
				formatter: function() { 
									//也可以用Highcharts.numberFormat(this.percentage, 2) //2表示精确到小数点后2位
									//替换Math.round(this.percentage)
									var	date=Highcharts.dateFormat('%Y-%m-%e',this.x);
			                        return '<b>'+date+'</b><br/><b> 价格:'+fmoney(this.y, 3) +'</b><br/>'+'';
			                }
           },
           legend: {
				enabled:false,
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
				borderColor:'rgb(250,0,0)',
               borderWidth: 0
           },
           series: [{
               name: 'price',
	            data: eval(datas),
				marker:{	
					symbol:'circle'//'url(./1.gif)circle'
				},
				enabled:true
           }],
			credits:{
			     enabled:false
			},
			exporting:{
	             enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
           }
         });
  	}); 

	function fmoney(s, n){   
	   n = n > 0 && n <= 20 ? n : 2;   
	   s = parseFloat((s + "").replace(/[^\d\.-]/g, "")) + "";   
	   var l = s.split(".")[0].split("").reverse();   
	   var r = s.split(".")[1]; 
	   
	   var t = "";   
	   for(i = 0; i < l.length; i ++ )   
	   {   
		  t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");   
	   } 
	   t=t.split("").reverse().join("");
	   if(typeof(r) != "undefined"){
			t=t+ "." + r;
	   }
	   return t;   
	} 
		</script>
	</head>
<body>
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>