使用highcharts动态绘制折线图——so easy
2024-10-19 09:34:05
之前学习highcharts发现网上的教程大部分是对highcharts数据的注释,如何动态绘制数据大部分一笔带过,让那些初涉开发的小白云里雾里,所以我就写了一篇这样的博客。
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script>
var chart;
$(function() {
var url="test.php";// 后台路径
var std=document.getElementById('std').value;
var end=document.getElementById('end').value;
var day="";
var beij="";
var guangz="";
$.ajax({
type: "POST",
url: url,
async:false,// 异步发送数据,默认是true,如果不加可能会出错
data: {"std":std,"end":end},
success: function(data){
var dat=JSON.parse(data);
day=dat.day;
beij=dat.beij;
guangz=dat.guangz; }
});
$('#container').highcharts({
chart: {
renderTo: 'chart_line', //图表放置的容器,DIV
defaultSeriesType: 'line', //图表类型line(折线图),
zoomType: 'x' //x轴方向可以缩放
},
credits: {
enabled: false //右下角不显示LOGO
},
title: {
text: '主要城市月平均气温' //图表标题
},
subtitle: {
text: '2011年' //副标题
},
xAxis: { //x轴
categories: day, //x轴标签名称
gridLineWidth: 1, //设置网格宽度为1
lineWidth: 2, //基线宽度
labels:{y:26} //x轴标签位置:距X轴下方26像素
},
yAxis: { //y轴
title: {text: '平均气温(°C)'}, //标题
lineWidth: 2 //基线宽度
},
plotOptions:{ //设置数据点
line:{
dataLabels:{
enabled:true //在数据点上显示对应的数据值
},
enableMouseTracking: false //取消鼠标滑向触发提示框
}
},
legend: { //图例
layout: 'horizontal', //图例显示的样式:水平(horizontal)/垂直(vertical)
backgroundColor: '#ffc', //图例背景色
align: 'left', //图例水平对齐方式
verticalAlign: 'top', //图例垂直对齐方式
x: 100, //相对X位移
y: 70, //相对Y位移
floating: true, //设置可浮动
shadow: true //设置阴影
},
exporting: {
enabled: false //设置导出按钮不可用
},
series: [{ //数据列
name: '北京',
data: beij
},
{
name: '广州',
data: guangz
}]
});
});
</script>
</head>
<form action="#" method="post">
<span id="sp2">
开始时间:<input type="text" name="startDay" id="std"/>
结束时间:<input type="text" name="endDay" id="end"/>
</span>
<input type="submit" value="查询" name="chaxun"/>
</form>
<div id="container" style="min-width: 310px; height: 400px;"></div>
</html>
在后台的代码我就不贴了,无非就是判断一下起始时间和结束时间是否为空,如果不为空就从数据库中查出来,使用将数据转化成json数据发到前端。
参考博客地址:http://www.helloweba.com/view-blog-157.html
最新文章
- C#中dynamic的正确用法
- JQuery Datatables服务器端处理示例
- Aspose.Word 操作word复杂表格 拆分单元格 复制行 插入行 文字颜色
- 用Socket做一个局域网聊天工具(转)
- C++12!配对
- delphi 05 图片和超链接
- C#_datatable 写入大量数据_BulkCopy
- iptables 汇总
- 一个还算简单的微信消息SDK(基于.Net Standard 2.0)
- 201521123110 《Java程序设计》第4周学习总结
- C# List集合去重使用lambda表达式
- .NET Core / C# 开发 IOT 嵌入式设备的个人见解
- day15-python常用内置模块的使用
- 数据分箱:等频分箱,等距分箱,卡方分箱,计算WOE、IV
- java web各个技术细节总结
- SecureCRT Win免安装版本,简单好用
- 验证Xpath和CSS 路径是否有效
- java.nio.charset.UnsupportedCharsetException: cp0
- oracle 找回DROP掉的表
- msado.tli