Highcharts ajax加载数据实例

原创 2017年01月03日 12:07:53
  • 这里我只给出重要代码

  • 思路是先通过ajax请求数据库数据,返回回来数组,我这里以servlet为例。就知道url啥意思了。

<script>
$(function () {
     var le=new Array();
     $.ajax({
         url: 'le',        //
         dataType: "json",
         type:"post",
         async:false,
         success: function (data) {
             le=data
             }
     });
    Highcharts.chart('container1', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '等级只有ABCD'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: '等级',
            colorByPoint: true,
            data: [{
                name: 'A',
                y: le[0]
            }, {
                name: 'B',
                y: le[1],
                sliced: true,
                selected: true
            }, {
                name: 'C',
                y:le[2]
            }, {
                name: 'D',
                y: le[3]
            }]
        }]
    });
});
</script>

效果图
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

Highcharts ajax获取json对象动态生成报表生成 .

http://blog.csdn.net/wsk7860/article/details/8751061
  • Baple
  • Baple
  • 2014年11月11日 16:23
  • 13839

AJAX与highcharts的调用

本项目以SSH为基本框架,要根据数据库的数据动态生成图表,需要ajax的运用。首先需要掌握的是在SSH框架中的ajax的运用。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据...
  • yu573017320
  • yu573017320
  • 2015年02月27日 21:43
  • 1214

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

  • 2014年12月05日 16:57
  • 2KB
  • 下载

(四)、读取数据库数据并在HighCharts上显示

在上一篇简单的静态例子中,大家应该可以看得出,图表里横纵坐标的数据都是静态的几个数据,因此我们只要从数据库读取出我们想要的横纵坐标值,然后动态赋给Chart就行了。  X轴:     xAxis: {...
  • taomanman
  • taomanman
  • 2011年04月15日 16:02
  • 27915

highcharts ajax加载数据

highcharts ajax加载数据
  • luolian123456
  • luolian123456
  • 2015年12月22日 09:30
  • 1107

HighCharts与使用Ajax交互

  • 2017年10月11日 15:05
  • 3KB
  • 下载

jquery, highcharts, Ajax读取json数据

highcharts结合jquery和ajax的方法读取和展现json数据。先上代码和结果。 首先,给出相关的data.json文件中的json数据:{ "success": true, "...
  • lcxlxm
  • lcxlxm
  • 2016年11月28日 16:06
  • 840

Highcharts通过AJAX访问后台数据库实时刷新

最近项目中要做一个实时人流量的折线统计图,接触了下Highcharts在网上看了很多博客和官方API,总结出一下代码。$(function () { var chart = Highchart...
  • qq_34905123
  • qq_34905123
  • 2016年11月29日 14:00
  • 2483

jquery结合highcharts使用Ajax异步刷新数据

Highchart是比较流行的一款图形插件,可以生成常用的饼图、拆线图、柱状图,图形界面也比较美观。官网上也提供了一引demo,但是如何使用json给Hightcharts各部分赋值,我选择了用aja...
  • huwenzhi1991
  • huwenzhi1991
  • 2014年12月28日 16:26
  • 2821

jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战

因为项目需要打算把原来做的比赛的东西,迁移到Angular JS上面,但是发现要熟悉使用起来还需要一段时间,旧的框架就是现有的jQuery+JSON+Highcharts+AJAX。 数据格式如下所示...
  • gmszone
  • gmszone
  • 2013年11月10日 17:00
  • 13819
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Highcharts ajax加载数据实例
举报原因:
原因补充:

(最多只允许输入30个字)