HighCharts动态加载数据

Html

<div id="container"></div>

Javascript

$(function () {
    var chart;
    var option={
        chart: {
            renderTo:‘container‘,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ‘Chart-Pie‘
        },
        tooltip: {
            pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: ‘pointer‘,
                dataLabels: {
                    enabled: true,
                    color: ‘#000000‘,
                    connectorColor: ‘#000000‘,
                    format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘
                }
            }
        },
        series: [{
            type: ‘pie‘,
            name: ‘Browser share‘,
            data: [
            ]
        }]
    };
    option.series[0].data=$.parseJSON(‘[["Andriod",63.8],["IOS",19.1],["WP",11.4]]‘);
    chart=new Highcharts.Chart(option);
});                        

需要注意的是如果将

option.series[0].data=$.parseJSON(‘[["Andriod",63.8],["IOS",19.1],["WP",11.4]]‘);

改成

option.series[0].data=$.parseJSON("[[‘Andriod‘,63.8],[‘IOS‘,19.1],[‘WP‘,11.4]]");

不会显示图像

结果如下

option.series[0]的数据可以通过AJAX从后台获取

时间: 2024-08-01 02:00:29

HighCharts动态加载数据的相关文章

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)

ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)

android左右滑动加载分页以及动态加载数据

android UI 往右滑动,滑动到最后一页就自动加载数据并显示 如图: Java代码 package cn.anycall.ju; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.content.ActivityNotFoundException; impo

ASP.NET MVC动态加载数据

ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table> <tr> <th style="width:10px;"><input id="SelectAll" type="checkbox" /></th> <th>ID</th> <th>Port_Start&l

滚屏加载--无刷新动态加载数据技术的应用

index.html <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

C# checklistbox控件用法总结(怎样得到多选的值,以及动态加载数据)

C# checklistbox控件用法总结(怎样得到多选的值,以及动态加载数据) 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值. 其实这里遍历的只是高亮的值并不是打勾的值.遍历打勾的值要用下面的代码: for (int i = 0; i < checkedListBox1.Items.Count; i++) { if (checkedListBox1.GetItemChecked(i)) { MessageB

用collection view动态加载数据卡顿的可能原因

在用collectionview动态加载数据时有个好处,就是cell得到了复用,如果整屏显示一个cell,最多只有两个cell,坏处就是需要不断的刷新cell,这时候容易卡顿. 每次滑动collectionview会调用代理方法,获取新的cell,这时你要将数据传给cell并进行显示. 现在的情况是快速滑动的时候和慢速滑动的时候不会卡顿,快速滑动的时候不会请求数据,所以卡顿原因可能是在请求数据的时候,慢速滑动的时候因为间隔时间长,数据应该都加载好了,所以卡顿原因可能是间隔过短,cell已经被创建

动态加载数据新的可行性

动态加载数据就是随着用户的交互情况来加载数据,避免一次全部加载浪费流量和卡顿. 最典型的情况就是用户查看每天的信息这种状况. 最开始我的做法是用一个scrollview和三个view来解决.先实现一个轮播图效果,每次用户左滑和右滑之后又将页面跳回到中间的页面,这个时候中间页面的状态应该和左滑或右滑页面的状态相同.所以每次都是先加载左中右三天数据,滑动到右边后,重置三天数据跳转到中间. 但这种有个问题,就是很难实现bounce反弹效果,即使实现了代码会非常乱,还有就是快速滑动的时候造成的无法滑动问

Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quo