注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

html5统计图表插件Highcharts

UI fishcity 6001浏览

html5统计图表Highcharts

Highcharts是一个纯JS的统计图库,它提供了非常简便的方法在网页中创建各种类型的统计图表,当然这个也包括了移动端。Highcharts统计图库包含了line(线型图), spline(曲线图), area, areaspline, column, bar, pie(饼状图), scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall 等各类流行的统计图表

Highcharts是基于html5的JS独立库,当然它也可以依赖于jquery、MooTools 和 Prototype 。很幸运的是,强大的Highcharts是开源的,它可以在任何地方免费使用,只需遵循开源协议就OK了。

现在让我们来建立起第一个统主图表吧:

引入核心库文件

方法1:使用jquery

<script src="http://ajax.useso.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

方法2:使用HIGHCHARTS STANDALONE FRAMEWORK

<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>

方法3:使用MOOTOOLS 或 PROTOTYPE

<!--这是使用mootools的方法-->
<script src="https://ajax.useso.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="http://code.highcharts.com/adapters/mootools-adapter.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<!--这是使用prototype的方法-->
<script src="https://ajax.useso.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

如果使用的是mootools和prototype,那么必须先引放它们,再加载highcharts.js,因为highcharts.js会检测是否使用MooTools 与 Prototyp。

以上都是从远程调用核心文件,下面是使用jquery本地调用的代码

<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>

现在我们来建立一个最基础的bar的图表,写入一个div元素,并给与ID与您想要的大小,当然这个的大小也就是您创建图表的大小,下面是代码:

<div id="container" style="width:100%; height:400px;"></div>

使用jquery来初始化

$(function () { 
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

如果你使用的是MOOTOOLS,那么需要微调下代码:

window.addEvent('domready', function() {
   var chart1 = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'bar'
   ...
});

用的是prototype,那么也需要微调下:

document.observe("dom:loaded", function() {
   var chart1 = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'bar'
   ...
});

更多的参数设置请参考实例或官方文档

转载请注明:jQ酷 » html5统计图表插件Highcharts

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。