文档章节

highstock读取json创建area stack percentage

勤奋的桑尼
 勤奋的桑尼
发布于 2014/10/23 14:36
字数 144
阅读 32
收藏 1

1, json文件:test_stackarea.json

[{
            "name": "Asia",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }, {
            "name": "Africa",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }, {
            "name": "Europe",
            "data": [[1412121600000,49271],
[1412208000000,0],
[1412294400000,10855]]
        }, {
            "name": "America",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }, {
            "name": "Oceania",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }]

2 js代码

function areastack() {
    	var seriesOptions = [],
        createChart = function () {
        $('#container').highcharts('StockChart', {

            rangeSelector : {
                selected : 1
            },
            xAxis: {
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'Percent(%)'
                }
            },
            title : {
                text : 'AAPL Stock Price'
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} )<br/>',
                shared: true
            },

            series : seriesOptions, 
            plotOptions: {
                area: {
                    stacking: 'percent',
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#ffffff'
                    }
                }
            },
        });
    	};

	    $.getJSON('http://localhost/Metrics/json/test_stackarea.json',function (data) {
	    	for(var i=0;i<data.length;i++){
	    		 seriesOptions[i] = {
		            name: data[i].name,
		            data: data[i].data,
		            type : 'area',
		            threshold : null,
	    		 };
	    	}
	    	createChart();
	    });
};

3 效果图

© 著作权归作者所有

勤奋的桑尼
粉丝 1
博文 32
码字总数 32516
作品 0
徐汇
程序员
私信 提问
highstock怎么获取servlet传过来的json数据,做成曲线图

如图数据,怎么在highstock获取: 这些json数据highstock怎么获取能得到曲线图啊。。。有没有实例研究下

Gavin_W
2016/12/23
211
2
Highchart属性笔记

Highchart一些平时不常用到的属性,偶尔想用时,查看API文档不易找到,耗费时间,本文只是为了让自己能够快速找到这些属性而记录的笔记。持续更新... 1.当图表没有数据时,图表中会显示相应的...

Smileswlin
2018/01/18
0
0
highstock怎么获取servlet传过来的json数据,做成曲线图

如图,highstock怎么获取servlet的json数据做成曲线图啊。。。 X轴去时间,y轴取price。。我怎么获取呢?

Gavin_W
2016/12/23
112
0
Highstock 1.0 发布

前天刚研究了一下Highstock,然后又定了个邮件订阅,结果就受到了这个新闻,1.0正式版发布了。 Highstock大家可能没听说过,但它的姊妹Highcharts我想有很多人听说过,完全基于js实现的图表,...

张金富
2011/10/19
1K
3
公共jquery库/常用前端公共库CDN服务推荐

一,360网站卫士常用前端公共库CDN服务 这里提供了由360网站卫士CDN驱动的常用前端公共库以及和谐使用Google公共库&字体库的调用方法 网址http://libs.useso.com/ 二,百度支持的JS,字体库列表...

越野小生
2016/07/22
16
0

没有更多内容

加载失败,请刷新页面

加载更多

日期时间命令date

命令date 用途:打印或设置系统日期和时间 语法:date [选项]... [+格式] 选项: -s, --set=STRING 根据 STRING 设置时间 -u, --utc, --universal 显示或设置全球时...

迷失De挣扎
47分钟前
2
0
小白讲网络安全系列

注入攻击防护 XSS注入 SQL注入 命令注入 文件上传 文件解压缩 CSRF防护 对称加密 非对称加密 数字证书 数字签名 完整性校验 消息验证码 单向散列Hash函数 口令单向加密算法 审计日志 认证鉴权...

一刀
今天
2
0
MYSQL 嵌套事务(SAVEPOINT) 与Spring 事务传播

摘要 savepoint 关键字可以实现嵌套事务。结合savepoint关键字,更方便理解spring的事务传播。 事务嵌套 初始化表脚本 drop table t;create table t(a int, primary key(a)); 开启事务 my...

liangxiao
今天
3
0
Chrome OS 更新新版本可让Linux访问USB连接的Android设备

谷歌再次为Chrome OS带来了重大版本更新,使版本号达到了75。本次更新的一大亮点就是允许在Chrome OS上运行的Linux能够识别通过USB方式连接的Android设备,能够让用户使用Linux进行调试等等。...

linuxCool
昨天
15
0
聊聊feign的HystrixInvocationHandler

序 本文主要研究一下feign的HystrixInvocationHandler HystrixInvocationHandler feign-hystrix-10.2.3-sources.jar!/feign/hystrix/HystrixInvocationHandler.java final class HystrixInvo......

go4it
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部