highcharts从后台获得json数据怎么在页面展示
项目做了一个报表，可以实时的观察呼叫中心的电话访问量，之前的版本是使用JFreechart做的，使用一段时间后出现内存溢出，服务器的内存使用量会变得很大，所以改用Ajax前台加载数据的方式实现实时报表功能，查了很久选择了JQuery结合Highcharts的方式，Highcharts是一个JS实时报表API，下面给出基本代码：
首先，要添加JQuery和Highcharts的引用：
Js代码 收藏代码
<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type='text/javascript' src='js/highcharts.js'></script>
页面的body部分需要有个层用来渲染图表：
Java代码 收藏代码
<body>
<div id="container" style="height: 400px"></div>
</body>
在JS中声明图表：
Js代码 收藏代码
<script type='text/javascript'>
//<![CDATA[
$(function(){
//声明报表对象
var chart = new Highcharts.Chart({
chart: {
//将报表对象渲染到层上
renderTo: 'container'
},
//设定报表对象的初始数据
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
function getForm(){
//使用JQuery从后台获取JSON格式的数据
jQuery.getJSON('http://localhostwww.meidiyazx.com/sitemap.htmlJQueryPIC/ajax', null, function(data) {
//为图表设置值
chart.series[0].setData(data);
});
}
$(document).ready(function() {
//每隔3秒自动调用方法，实现图表的实时更新
window.setInterval(getForm,3000);
});
});
//]]>
</script>
数据处理概述
最后修改时间：2017-03-23 18:08
在 Highcharts 的配置代码中，只需要按照规定的格式通过 series.data 配置给定数据即可，另外我们也提供了非常多的用于更新图表数据的函数，例如 Point.update, Series.setData, Series.update；
在实际使用过程中，有很多用户对于数据的来源、数据怎么处理、怎么交互有很多疑问，本章将一一的为大家解惑。
1、数据来源
Highcharts 是基于 JavaScript 编写的图表库，自身是没有直接获取服务器（数据库）数据的能力，除了内置的数据功能模块支持直接读取 CVS、HTML 表格、Google SpreadSheets（Google 提供的一种在线表格服务）等数据外，数据来源还需要后端服务支持（动态渲染或提供接口等），另外 JS 还可以直接读取纯文本数据文件。
总的来说，数据来源有以下几种方式：
服务端直接渲染（包括直接渲染 HTML 页面、HTML 表格）
Ajax 请求数据接口（来自服务器数据库的数据或其他数据）
Highcharts 内置的数据功能模块读取 CVS、HTML 表格、Google SpreadSheets 数据
JavaScript 读取纯文本数据文件，例如 XML 文件、JSON 文件、CSV 文件
2、数据处理和交互
支持数据的处理，一般是用 JavaScript 针对返回的 JSON 数据、字符串数据进行数组、对象的操作，最终转换成 Highcharts 需要的格式，这个过程涉及到 JavaScript 对象、数组、JSON等基础知识，请大家自行了解和学习相关的知识，为了方便我们也会在后面教程中做简单的介绍。
数据交互指的是动态的更新图表中数据，一般是在获取并处理数据后调用 Highcharts 相关的 API 接口进行图表动态更新，这在对交互性比较高的图表中会遇到，比如实时更新的图表、股票图等。
