[转载]JQuery图表插件——Highcharts

baacloud免费翻墙vpn注册使用

[转载]JQuery图表插件——Highcharts – LyIng.Net – 博客园.

因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO。点击跳转官网

先上三个图,分别是曲线、柱状、扇形。

图表中的数据纯属于DEMO的测试数据,没有实际用意。下面讲下大致的实现步骤

第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的。可以下载DEMO逐一试试就知道效果怎么样了,上图就 应用了两个样式。download中放的是打印和导出成图片的js文件(貌似是通过js上传到官网,然后再下载到本地),因为项目是放到内网的所以就没有 用了。

第二步,实现,贴代码。

var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',          //放置图表的容器
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    defaultSeriesType: 'line'   
                },
                title: {
                    text: 'JQuery曲线图演示'
                },
                subtitle: {
                    text: '副标题'
                },
                xAxis: {//X轴数据
                    categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'],
                    labels: {
                        rotation: -45, //字体倾斜
                        align: 'right',
                        style: { font: 'normal 13px 宋体' }
                    }
                },
                yAxis: {//Y轴显示文字
                    title: {
                        text: '产量/百万'
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function() {
                        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true//是否显示title
                    }
                },
                series: [{
                    name: '杭州',
                    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '江西',
                    data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6]
                }, {
                    name: '北京',
                    data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6]
                }, {
                    name: '湖南',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
                });
            });

这写都是配置,最重要的就是series里面的数据了,如果需要从数据库中取出来的话,直接生成json然后赋值上去就OK了,效果很炫,还有动态感,感兴趣的朋友可以下载下来跑跑。

注意,DEMO里的download文件夹中的js文件,本来导出及打印的一些提示是英文,我已经修改成中文了,在引用js文件的时候需要 charset=”gb2312″,具体DEMO中我已经写好了注释。好的,到此为止。下载地址

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏