`
minghe_zy
  • 浏览: 123692 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jquery-highcharts获得json数据

 
阅读更多

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<title>饼图-例子</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
  
   var chart;
$(document).ready(function() {
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false
      },
      title: {
         text: 'Browser market shares at a specific website, 2010'
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               color:  '#000000',
               connectorColor: '#000000',
               formatter: function() {
                  return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
               }
            }
         }
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: [
            ['Firefox',   45.0],
            {
               name: 'IE',   
               y: 26.8,
               sliced: true,
               selected: true
            },
            ['Chrome',    12.8],
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
         ]
      }]
   });
  
   function getForm(){  
 //var data = ["['Firefox',45.0]","[{name: 'Chrome',y: 26.8,sliced: true,selected: true}]","['IE',12.8]","['Safari',8.5]","['Opera',6.2]","['Others',0.7]"];
    //var data = "[{'Firefox',45.0},{'Chrome',26.8},{'IE',12.8},{'Safari',8.5},{'Opera',6.2},{'Others',0.7}]";
 
  var data = [['Firefox',45.0],{name: 'Chrome',y: 26.8,sliced: true,selected: true},['IE',12.8],['Safari',8.5],['Opera',6.2],['Others',0.7]];
            
            
                chart.series[0].setData(data); 
               
           
               
          chart.redraw();
       
        }  
 
      
        $(document).ready(function() {  
            //每隔3秒自动调用方法,实现图表的实时更新  
           // window.setInterval(getForm,3000);   
               getForm();
        });  
  
});

  </script>
</head>

<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto ;border:1px #000000 solid;"></div>
</body>
</html>

分享到:
评论

相关推荐

    ajax+jquery+highcharts+json

    实现一个简单ajax+jquery+highcharts+json例子,主要让初学者了解ajax+jquery是怎么接受后台传过来的json数据,并显示到前台highcharts中的,以及js文件应该如何放置等问题。

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

    Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    Highcharts做的图表例子,页面JQuery,后台JAVA JSON

    文件仅有两个文件,一个是HighCharts做的曲线图标htm,使用JQuery Ajax接收JSON字符串,后台使用java HttpServeltResponse json, out.write("....");此例运行需要官方的js demo包,部分java方法代码如下涵盖两条曲线,str...

    highcharts 与ajax的应用

    使用ajax获取highcharts所需的数据,小程序仅供参考。

    使用json字符highcharts绑定数据

    统计图的字段个数可以动态添加。使用的是json字符串绑定。供参考

    Jquery+ajax+highcharts 非常详细,网上太笼统,学习之余整合了一下

    网上的资源将的都很笼统也不全面,我也是在学习这些东西,把自己写的稍微整合了一下,应该时候新手看,能够完全运行,只要自己附加...Jquery中easyui的运用,ajax后台数据的传输,Json的拼接,highcharts获取后台数据!

    ext3.0+highcharts+ext时间日期控件+jquery+json

    ext3.0+highcharts+ext时间日期控件+jquery+json

    Highcharts-8.1.2.zip

    Highcharts 的数据是 JavaScript 数组或对象,这些数据可以是本地的配置对象,独立的数据文件(JSON、CVS)甚至是不同的网站上定义。另外,这些数据可以用任何形式处理好并加载到 Highcharts 中。 gauges仪表图 ...

    Highcharts-Gantt-8.1.2.zip

    结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...

    Highcharts-Stock-8.1.2.zip

    结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...

    FusionChartsFree、Amcharts、Highcharts用列

    Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...

    MVC快速开发框架

    1、前端技术 JS框架:jquery-2.1.1、Bootstrap.js、JQuery UI CSS框架:Bootstrap v3.3.4(稳定是后台,UI方面根据需求自己升级改造吧)。...工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似

    Highcharts FusionChartsFree amcharts

    Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...

    NFine快速开发框架.rar

    框架使用场景:OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架主要运用技术: 1、前端技术 JS框架:jquery-2.1.1、Bootstrap.js、JQuery UI ...工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似

    Highcharts(纯JS图表插件)

    纯JS的图表插件,效果非常绚丽。只要提供JSON数据,JS自动生成图表,柱状、曲线图、饼图等。

    快速开发框架NFine ASP.NET MVC+EF6+Bootstrap开发框架

    框架使用场景:OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架功能: 1.系统管理 机构管理、角色管理、岗位管理、用户管理、数据字典、...•工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似

    salesvis:与基于 Java 的后端通信、获取数据并使用 highcharts.js 可视化该数据的 Web 应用程序

    通过 jquery getJson 获取数据: $.getJSON(' ', {'sessionid' : $.cookie('sessionCookie')}, function(data) { // do stuff }); 检查 js/app.js 以查看此内容。 链接需要指向backend.jar/endpoint路径 角度路由 ...

    Highcharts 配置语法

    Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置。 ...创建一个 HTML 页面,引入 jQuery 和 Highcharts 库: ...Highcharts 库使用 json 格式来配置。 $('#container').highch

    Python3教程菜鸟教程.pdf

    Java 教程 JavaScript 参考⼿册 Javascript 教程 jQuery EasyUI 教程 jQuery Mobile 教程 jQuery UI 教程 jQuery 教程 JSON 教程 JSP 教程 Linux 教程 Lua 教程 Memcached 教程 MongoDB 教程 MySQL 教程 Node.js ...

Global site tag (gtag.js) - Google Analytics