Highcharts通过Ajax请求后台数据并渲染

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <script src="scripts/boot.js" type="text/javascript"></script>
    <script src="scripts/Highcharts-4.0.3/js/highcharts.js"></script>
 
    <style type="text/css">
        html, body {
            font-size:12px;
            padding:0;
            margin:0;
            border:0;
            height:100%;
            overflow:hidden;
        }
        .style1 {
            width: 112px;
        }
        .mini-textbox {
            width: 167px;
        }
    </style>
</head>
<body>    
     
    <div class="mini-fit">
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </div>
 
</body>
</html>
<script type="text/javascript">
    mini.parse();
    test();
 
    var date = new Array(), val = new Array();
    function showchart() {
        //开始绘制图表
        var chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container', //容器名，和body部分的div id要一致
                type: 'spline' //图表类型，这里选择折线图
            },
            title: {
                text: '曲线数据'
            },
            xAxis: {
                //此处即是上面声明在函数中的数组对象。
                categories: date
            },
            yAxis: {
                title: {
                    text: "<span style='font-size:12px;font-weight:bold;'>my TITLE</span>"
                },
                //tickInterval: 3,
                min: 0.0,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]/*,
                labels: {
                    formatter: function () {
                            if (this.value == 3) {
                                return "三级";
                            } else if (this.value == 6) {
                                return "二级";
                            } else if (this.value == 9) {
                                return "一级";
                        }
                    }
                }*/
            },
            tooltip: {
                valueSuffix: ' Point'
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Point',
                //声明在当前函数中的数组对象
                //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                data: val,
                color: '#F75252'
            }]
        });
    }
    function test() {
        $.ajax({
            url: "data/AjaxServiceDoRead.aspx?method=GetChartData",
            type: 'post',
            cache: false,
            success: function (text) {
                //alert(text);
                var o = mini.decode(text);
                //alert(o.data.length);
                if (o.data != null && o.data.length != 0) {
                    for (var w = 0; w < o.data.length; w++) {
                        //此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
                        date.push(o.data[w].mouth + "月份");
                        //也可以在对数据的处理放在highchart 中进行处理。
                        val.push(parseFloat(o.data[w].val));
                    }
                }
                //val += "]";
                /*alert(val[0]);
                alert(val[1]);
                alert(val[2]);*/
                showchart();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
 
      /*
        $.ajax({
            type: "POST",
            url: "data/AjaxServiceDoRead.aspx?method=GetChartData",
            dataType: 'json',
            async: false,
            success: function (data) {
                alert(data.length);
                // 返回如下json 格式数据
                //        {"data":[
                //                { "mouth": "1", "val":"3"},
                //                { "mouth": "2", "val":"6"},
                //                { "mouth": "3", "val":"9"}
                //]}
                //对数据进行加工处理，也可以按你自己的需求进行处理
                if (data != null && data.length != 0) {
                    for (var w = 0; w < data.length; w++) {
                        //此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
                        date.push(data[w].mouth + "月份");
                        //也可以在对数据的处理放在highchart 中进行处理。
                        val.push(parseFloat(data[w].val));
                    }
                }
                //若后台返回的数据仅仅是json 样子的的字符串
                //那需要将其格式化
                //然后即可对数据进行类似操作。
                var dataTmp = eval(data);
            }
        }, 'json');
      */
    }
</script>

posted @ 2022-09-09 14:09 ThesunKomorebi 阅读(219) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 扩展运算符

· C#+Access 员工信息管理--简单的增删改查操作和.ini配置文件的读写操作。

· Highcharts使用指南

· Flask框架：运用Ajax轮询动态绘图

· 项目中js使用ajax请求

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话

公告

昵称： ThesunKomorebi
园龄： 4年10个月
粉丝： 0
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

文章分类

Java(1)

ThesunKomorebi

Highcharts通过Ajax请求后台数据并渲染

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

文章分类

阅读排行榜

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<script src="scripts/boot.js" type="text/javascript"></script>
	<script src="scripts/Highcharts-4.0.3/js/highcharts.js"></script>

	<style type="text/css">
	html, body {
	font-size:12px;
	padding:0;
	margin:0;
	border:0;
	height:100%;
	overflow:hidden;
	}
	.style1 {
	width: 112px;
	}
	.mini-textbox {
	width: 167px;
	}
	</style>
	</head>
	<body>

	<div class="mini-fit">
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</div>

	</body>
	</html>
	<script type="text/javascript">
	mini.parse();
	test();

	var date = new Array(), val = new Array();
	function showchart() {
	//开始绘制图表
	var chart2 = new Highcharts.Chart({
	chart: {
	renderTo: 'container', //容器名，和body部分的div id要一致
	type: 'spline' //图表类型，这里选择折线图
	},
	title: {
	text: '曲线数据'
	},
	xAxis: {
	//此处即是上面声明在函数中的数组对象。
	categories: date
	},
	yAxis: {
	title: {
	text: "<span style='font-size:12px;font-weight:bold;'>my TITLE</span>"
	},
	//tickInterval: 3,
	min: 0.0,
	plotLines: [{
	value: 0,
	width: 1,
	color: '#808080'
	}]/*,
	labels: {
	formatter: function () {
	if (this.value == 3) {
	return "三级";
	} else if (this.value == 6) {
	return "二级";
	} else if (this.value == 9) {
	return "一级";
	}
	}
	}*/
	},
	tooltip: {
	valueSuffix: ' Point'
	},
	legend: {
	enabled: false
	},
	credits: {
	enabled: false
	},
	series: [{
	name: 'Point',
	//声明在当前函数中的数组对象
	//data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
	data: val,
	color: '#F75252'
	}]
	});
	}
	function test() {
	$.ajax({
	url: "data/AjaxServiceDoRead.aspx?method=GetChartData",
	type: 'post',
	cache: false,
	success: function (text) {
	//alert(text);
	var o = mini.decode(text);
	//alert(o.data.length);
	if (o.data != null && o.data.length != 0) {
	for (var w = 0; w < o.data.length; w++) {
	//此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
	date.push(o.data[w].mouth + "月份");
	//也可以在对数据的处理放在highchart 中进行处理。
	val.push(parseFloat(o.data[w].val));
	}
	}
	//val += "]";
	/*alert(val[0]);
	alert(val[1]);
	alert(val[2]);*/
	showchart();
	},
	error: function (jqXHR, textStatus, errorThrown) {
	alert(jqXHR.responseText);
	}
	});

	/*
	$.ajax({
	type: "POST",
	url: "data/AjaxServiceDoRead.aspx?method=GetChartData",
	dataType: 'json',
	async: false,
	success: function (data) {
	alert(data.length);
	// 返回如下json 格式数据
	// {"data":[
	// { "mouth": "1", "val":"3"},
	// { "mouth": "2", "val":"6"},
	// { "mouth": "3", "val":"9"}
	//]}
	//对数据进行加工处理，也可以按你自己的需求进行处理
	if (data != null && data.length != 0) {
	for (var w = 0; w < data.length; w++) {
	//此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
	date.push(data[w].mouth + "月份");
	//也可以在对数据的处理放在highchart 中进行处理。
	val.push(parseFloat(data[w].val));
	}
	}
	//若后台返回的数据仅仅是json 样子的的字符串
	//那需要将其格式化
	//然后即可对数据进行类似操作。
	var dataTmp = eval(data);
	}
	}, 'json');
	*/
	}
	</script>