文档章节

Highcharts 3.0.8功能特性使用评测

咲晚杍
 咲晚杍
发布于 2014/01/20 11:43
字数 483
阅读 161
收藏 1

一、向下钻取功能

Highcharts 3.0.8内建向下钻取功能。在drilldown.series数组中,为点进行向下钻取设置就可以实现。

基本设置

基本设置中向下钻取定义在 drilldown设置下的一个独立的数组中。每一个设置都会被分配ID,这样我们可以使用它们为钻取的点进行识别。

效果图:

Highcharts 3.0.8向下钻取

向下钻取:

Highcharts 3.0.8向下钻取

代码:

series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: 'animals'
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: 'fruits'
            }, {
                name: 'Cars',
                y: 4,
                drilldown: 'cars'
            }]
        }],
        drilldown: {
            series: [{
                id: 'animals',
                data: [
                    ['Cats', 4],
                    ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 2],
                    ['Pigs', 1]
                ]
            }, {
                id: 'fruits',
                data: [
                    ['Apples', 4],
                    ['Oranges', 2]
                ]
            }, {
                id: 'cars',
                data: [
                    ['Toyota', 4],
                    ['Opel', 2],
                    ['Volkswagen', 2]
                ]
            }]
        }

异步设置

在修多情况下,我们都会想要其自动加载钻取内容。设置 point.drilldown 为true,并使用图表向下钻取选项加载基于点击点的钻取设置。当数据展现,我们在呼出Chart.addSeriesAsDrilldown方式。

效果图:

Highcharts 3.0.8向下钻取

对上图中数据进行向下钻取

Highcharts 3.0.8向下钻取

代码:

$(function () {    

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {
                        
                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5],
                                        ['Oranges', 7],
                                        ['Bananas', 2]
                                    ]
                                },
                                'Cars': {
                                    name: 'Cars',
                                    data: [
                                        ['Toyota', 1],
                                        ['Volkswagen', 2],
                                        ['Opel', 5]
                                    ]
                                }
                            },
                            series = drilldowns[e.point.name];
                        
                        // Show the loading label
                        chart.showLoading('Simulating Ajax ...');

                        setTimeout(function () {
                            chart.hideLoading();
                            chart.addSeriesAsDrilldown(e.point, series);
                        }, 1000);
                    }

                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: true
            }, {
                name: 'Cars',
                y: 4,
                drilldown: true
            }]
        }],

        drilldown: {
            series: []
        }
    })
});

二、显示No data to display

有数据情况效果图:

Highcharts 3.0.8显示No data to display

无数显示No data to display

Highcharts 3.0.8显示No data to display

代码:

$(function () {

    var chart,
        btnRemove = $('#remove'),
        btnAdd = $('#add');

    btnAdd.click(function () {       
        chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); // Return random integer between 1 and 10. 
    });

    btnRemove.click(function () {     
        if(chart.series[0].points[0]) {
            chart.series[0].points[0].remove();
        }
    });

    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'No data in pie chart'
        },
        series: [{
            type: 'pie',
            name: 'Random data',  
            data: []     
        }]
    });

    chart = $('#container').highcharts();
});

三、Non-snapping crosshairs

效果图:

Highcharts 3.0.8显示Non-snapping crosshairs

代码:

$(function () {
    $('#container').highcharts({
    	title: {
    			text: 'Non-snapped crosshair'
    	},
    	xAxis: {
            crosshair: {
                snap: false
            }
        },
        yAxis: {
            crosshair: {
                snap: false
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

本文转载自:http://www.evget.com/article/2014/1/17/20427.html

咲晚杍
粉丝 6
博文 75
码字总数 8143
作品 0
渝中
私信 提问
cheng5x/YcHighCharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图...

cheng5x
2015/08/05
0
0
经典 JavaScript 图表库 Highcharts 6.1.3 bugfix 发布

Highcharts 6.1.3 发布了,该版本没有任何功能方面的变更,主要是修复了 bug: Highcharts 6.1.3 (2018-09-12) Bug 修复 Fixed #1902, make generated source maps visible to the browser. ......

淡漠悠然
2018/09/14
826
2
纯 Javascript 图表 - Highcharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图...

匿名
2009/12/10
132.5K
18
Highcharts图表框架.NET版--YcHighCharts

Highcharts 是一个制作图表的纯 Javascript 类库,自主封装 .net 图表框架,支持 webform 和 mvc3 以上。 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人...

cheng5x
2015/08/06
1K
1
小米首发支持 Android 4.0 新内核 内测图赏

新闻来源:驱动之家 Android 4.0,Ice Cream Sandwich(冰淇淋三明治,简称ICS),不知道有多少Android痴迷者已经在为这个新版系统而纠结。高帅富或许已经买了Galaxy Nexus,我等穷苦大众还在等...

红薯
2011/12/10
2.4K
4

没有更多内容

加载失败,请刷新页面

加载更多

Spark Streaming的优化之路——从Receiver到Direct模式

          作者:个推数据研发工程师 学长 1 业务背景 随着大数据的快速发展,业务场景越来越复杂,离线式的批处理框架MapReduce已经不能满足业务,大量的场景需要实时的数据处理结果来...

个推
今天
3
0
壮丽70年·奋斗新时代|蒸妙集团熏蒸中会阴熏蒸的神奇好处

聚结相合之处为会。会阴居两阴间,为督、任、冲三脉的起点,三脉背出两阴之间,会聚阴部,因名会阴。会阴,经穴名。出《针灸甲乙经》。会阴别名屏翳、下极、金门。属任脉。在会阴部,男性当阴...

公益传承
今天
2
0
pentaho-kettle-8.2.0.0-R源码开发环境搭建

1.从Kettle官网下载源码,本文使用的是pentaho-kettle-8.2.0.0-R 下载地址:https://codeload.github.com/pentaho/pentaho-kettle/zip/8.2.0.0-R 2.打开eclipse,选择一个新的工作空间,然后设...

gq_2010
今天
1
0
lua web快速开发指南(7) - 高效的接口调用 - httpc库

httpc库基于cf框架都内部实现的socket编写的http client库. httpc库内置SSL支持, 在不使用代理的情况下就可以请求第三方接口. httpc支持header、args、body、timeout请求设置, 完美支持各种h...

水果糖的小铺子
今天
5
0
通过四道常问面试题,带你了解什么是数据库分库分表

编者语:为了避免被误解为:「手里有把锤子,看什么都是钉子!」,说明一下不是什么业务都适合分布式数据库,更不是用了分布式数据库性能就一定能得到扩展。 其次:本文为纯干货,建议先转发...

老道士
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部