highcharts与ajax的应用

整理一份完整的例子,以供参考:

<1>页面chart.html:

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>highchart折线图</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script src="highcharts.js"></script>
    <script type="text/javascript">
        var xset = [];//X轴数据集
        var yset = [];//Y轴数据集
        /*返回数据*/
        function getData(){
            $.getJSON(‘com/ChartServlet‘,function(data){
                $.each(data,function(i,item){
                    $.each(item,function(k,v){
                        xset.push(k);
                        yset.push(v);
                    });
                })
                console.log(xset);
                console.log(yset);
                //根据时间序列生成折线图
                showChart(xset,yset);
            });
        }
        /*定义图表*/
        function showChart(xset,yset){
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: ‘linecontainer‘,
                    type: ‘line‘,
                    marginRight: 130,
                    marginBottom: 25
                },  

                xAxis: {
                    categories: xset
                },
                yAxis: {
                    title: {
                        text: ‘数据‘
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: ‘#808080‘
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return ‘<b>‘+ this.series.name +‘</b><br/>‘+
                            this.x +‘: ‘+ this.y;
                    }
                },
                legend: {
                    layout: ‘vertical‘,
                    align: ‘right‘,
                    verticalAlign: ‘top‘,
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: ‘随机时间序列‘,
                    data: yset
                }]
            });
        }  

        //执行
        getData();
    </script>  

  </head>  

  <body>
          <!-- 图表显示区 -->
           <div id="linecontainer" style="width: 1200px; height: 300px"></div>
  </body>
</html></span>  

highcharts与ajax的应用,布布扣,bubuko.com

时间: 2024-10-27 00:33:52

highcharts与ajax的应用的相关文章

Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图

上个图给大家看下效果. 点击  查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 2.Highcharts 中文API 实例网站     http://www.hcharts.cn/index.php ---------

asp.net中绘制大数据量的可交互的图表

在一个asp.net项目中要用到能绘制大数据量信息的图表,并且是可交互的(放大.缩小.导出.打印.实时数据),能够绘制多种图形. 为此进行了多方调查预研工作,预研过微软的MsChart图表组件.基于jquery的FlortChart图表.Silverlight的Visifire图表组件.基于js和flash的FusionCharts图表.Ext4.0框架中的图表.纯js的Highstock和纯js的Highcharts. 下面给出各个图表的预研结果,以供参考. MsChart MsChart是一

数据分析画图,使用原生sql查询数据

1.使用工具 https://www.hcharts.cn/ http://echarts.baidu.com/ 2.子表查询 id 创建时间 内容 处理者 1 2017-02-01 11:11 1 2 2017-03-01 11:11 11 3 2017-04-01 11:11 2 4 2017-05-01 11:11 1 5 2017-02-02 11:11 1 1. 思路 处理者列表 = select 处理着 from tb for 处理者 in 处理者列表: v = select * f

[django]django+post+ajax+highcharts使用方法

直接代码展示: view.py文件代码 from django.http import JsonResponse #django ajax部分 def ajax_kchart(request): times = request.POST['shijian'] chnl = request.POST['chnl'] chnl_data = keywork_chart(chnl,times) data_list = [] for j in chnl_data: data_list.append(j)

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo

原文:Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo 源代码下载地址:http://www.zuidaima.com/share/1550463370480640.htm 此功能可以用在后端对数据的实时抓取,前端动态更新时使用,可以根据数据的变化进行实时刷新,基于之前我上传的一个图形demo改制.如有意见建议,疑问,大家可以留言一起探讨. 源代码截图:

ajax请求返回Json字符串运用highcharts数据图表展现数据

[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] [2] [2].[代码] Json字符串和highcharts数据图表展现 跳至[1] [2] 001 /* 002 * Filename: OQtyOrPriceReport.js 003 * Description:客户订单数量和价格报表分析 004 * Created: 2013.11.14 005 * Author : liangjw 006 * Company:Copyright (C) 2013

Django ajax MYSQL Highcharts&lt;1&gt;

Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废话不多说.在过程中遇到的问题总结: 1. Ajax URL 请求403 错误: 是由于CSRF(Cross-site request forgery跨站请求伪造请求保护)的原因.目前有三种方法 1.1 我使用的是@csrf_exempt加在相应的view前,但是这样不安全,是关闭csrf保护功能.

DWR(AJAX)+Highcharts绘制曲线图,饼图

基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3. Hightcharts的x,y轴数据绑定 4. Hightcharts的使用自己定义样式 Highcharts代码(或者说Highcharts的配置)是一个json字符串,说白了就是要想在前台使用Hightcharts插件画图,后台返回的数据类型必须是json字符串.Hightcharts才会认

highcharts联合jquery ajax 后端取数据

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTool