highcharts从后台获得json数据怎么在页面展示

如题所述

第1个回答 2017-10-02

项目做了一个报表，可以实时的观察呼叫中心的电话访问量，之前的版本是使用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>

第2个回答 2018-01-25

数据处理概述

最后修改时间：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 接口进行图表动态更新，这在对交互性比较高的图表中会遇到，比如实时更新的图表、股票图等。

数据处理概述

本回答被提问者采纳

相似回答

请教一个Highcharts显示数据的问题答：既然你的数据是从数据库动态读取的，那你就把日、月、年当成参数传入你的sql语句，并按照这个参数进行分组显示数据，例如：读取完数据后，接着就是往前台绑定json数据了，绑定json数据可参考如下图：至此，你想实现的功能就可以实现了

怎么样让ECharts从后台获取数据并展示答：//使用Ajax请求你的servlet或者controller或者action 然后获取数据$.get('Query_RealTimeServlet').done(function jzdata(result) { //有可能出现没转换成功的json数据 再转换一次var json = JSON.parse(result);//用数组存储数据我这边有三个//xdata 是X轴的数据// ldata rdata是表中的两条...

用Highcharts能不能做出这样一张图出来答：可以的，后台组装好json格式的数据，（这里的数据需要一个json数组，每一个数组代表一个图）。前台 for(...){ var chart = new Highcharts.Chart({chart:... }) } for遍历你的json数组，对应装data就ok了。

如何用Highcharts制作柱形图答：1、打卡Sublime Text，新建HTML5页面，然后在页面中插入jquery和highcharts的脚本文件，如下图所示 2、然后在body元素中定义放置柱形图的div容器，如下图所示，注意给div设置宽和高 3、接下来在script中订单柱状图的标题，副标题，X，Y坐标轴的配置信息，如下图所示 4、然后就是准备柱状图的数据了，如...

大家正在搜

jsp页面获取json数据 easyui怎么处理json数据 jsp页面传递json数据 jsp页面解析json数据 ajax接收json数据后端如何接收json数据后端返回json数据既返回html页面也返回json 页面显示json未定义