2014.05.04 highcharts图形报表使用积累

http://www.highcharts.com/demo/

用途：1.highchart主要以图形结合文字的方式来描述数据，做数据归类、统计时可用到

饼图：数据格式 1).data : [pair1，pair2，...] ;  pair : {name：“”，y：""}

 series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]

categories

柱状图：数据格式 1) categories: List格式； 

xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },

2）series：[serie1,serie2,...] serie : {name：”“，type：”“，data：List}

series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    
            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    
            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    
            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    
            }]

可实现的技巧：

highchart的一些属性，参见：http://www.cnblogs.com/chiflyzheng/archive/2012/07/26/2610063.html

1.图随数据变化，js获取数据：

 

2. 图表可以点击，进入查看详情

在这里，clickFunction 这个方法是由外部调用highchar时，传入的（同事写的，传递的参数是一个方法，还从未这样写过）