`
兩ting
  • 浏览: 78318 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

Highcharts

阅读更多

1、Highcharts基础介绍

Highcharts是一个非常流行,界面美观的纯Javascript图表库。它主要包括两个部分:Highcharts和Highstock。Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。

HIghChartS官网:http://www.highcharts.com/

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

Highcharts支持曲线图、饼图、柱状图、仪表图、散点图等等几十种图形,界面展示效果非常丰富,3D效果也很好看。列出几个供参考下吧

   

Highcharts使用jQuery等Javascript框架来处理基本的Javascript任务。因此,在使用Highcharts之前,需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架,那么你需要在页面头部同时引用jQuery和Hightcharts两个文件就可以了。

由于我在Web开发框架中,主要采用了MVC+EasyUI的方式,因包含的文件如下所示。

复制代码
    @*添加Jquery,EasyUI和easyUI的语言包的JS文件*@
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>


    @*图表JS文件应用*@
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts.js"></script>
复制代码

但是为了更好的展示效果,我们一般添加一个图标预定义的样式进去,同时添加导出功能的脚本,如下所示。

    @*图表JS文件应用*@
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/modules/exporting.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/themes/grid.js"></script>

当然,如果我们散点图、3D图形等内容,还需要引入一些额外的js文件的

    <script src="~/Content/JQueryTools/Highcharts/js/highcharts-more.js"></script>
    <script src="~/Content/JQueryTools/Highcharts/js/highcharts-3d.js"></script>

 

2、图表的生成操作

前面说了,这个图表控件主要就是使用Jquery和Javascript来实现,我们来分析下一个饼图的Demo代码。

复制代码
$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        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]
            ]
        }]
    });
});
复制代码

上面的脚本主要就是根据series属性里面的数据进行生成饼图的,那么我们实际开发的时候,数据肯定不是固定的,一般我们是通过动态方式赋值的。

如我一般倾向于使用Jquery的Ajax方式,调用后台获得数据,然后进行绑定的。那么这种情况下,如何操作脚本了呢,我们来分析看看。

首先我们先在脚本函数里面,初始化一个chart对象,并把其中涉series数据data设置为空就是了。

复制代码
            var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: "container1",
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                },
                title: {
                    text: '集团分子公司人员组成'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }

                        },
                        //showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '人员数量',
                    data: []
                }]
            });
复制代码

第二步是通过Ajax调用后台连接获得数据,然后绑定到具体的属性上就可以了,具体代码如下所示。

复制代码
            //通过Ajax获取图表1数据
            $.ajaxSettings.async = false;
            var data1 = [];
            $.getJSON("/User/GetCompanyUserCountJson", function (dict) {                
                for (var key in dict) {
                    if (dict.hasOwnProperty(key)) {
                        data1.push([key, dict[key]]);
                    }
                };
                chart1.series[0].setData(data1);
            });
复制代码

而图表的HTML代码则是如下所示,主要就是新增一个div,id为container1,用来放置图表就是了。

复制代码
                             <div class="box">
                                 <div class="box-title">
                                     <div style="float: left">
                                         <img src="~/Content/JqueryEasyUI/themes/icons/customed/user.png" alt="" width="20" height="20" />
                                         图表1
                                     </div>
                                     <div style="float: right; padding-right: 10px;">更多</div>
                                 </div>
                                 <div class="box-content" style="height: 310px">
                                     <div id="container1" style="height: 300px;max-width:500px"></div>
                                 </div>
                             </div>
复制代码

完成以上的代码,我们运行就可以看到下面的图形了,这样看起来是不是比较酷一些呢。

3、图表的导出功能及菜单汉化

从上面的图表里面看到,每个图表的右上角,都有一个菜单的功能,里面有一些功能,如打印图片、导出图片等操作,具体菜单的表现如下所示。

但是上面的菜单式我经过了汉化处理的, 默认的显示效果是英文的,如下所示。

显然英文的菜单,不是我们希望的,我们需要汉化一下才更好,那么如何汉化上面的通用菜单呢,需要每个模块都重复一样的汉化吗,当然不需要了。我们可以把它放到全局设置里面。

前面我们介绍了,为了使得图表展示更好的效果,我们包含了一个grid.js的图表样式,其实里面也还有其他样式可以使用的,不过我觉得还是grid.js的样式最佳,如下所示。

那么既然使用了这个样式设置,我们把全局的一些设置,如汉化的操作,也放到这里就可以了。

我们在这个文件的底部,增加一个SetOption的操作代码就可以,这些汉化的菜单,由于我使用了最新版本,有些参数是和旧版本不一致的,所以冲着这个辛苦劲,应该推荐鼓励下哦。呵呵

设置汉化的代码。如下所示。

复制代码
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

//汉化图表菜单
Highcharts.setOptions({
    lang: {
        contextButtonTitle: "图表菜单",
        printChart: "打印图片",
        downloadJPEG: "下载JPEG 图片",
        downloadPDF: "下载PDF文档",
        downloadPNG: "下载PNG 图片",
        downloadSVG: "下载SVG 矢量图",
        exportButtonTitle: "导出图片"
    }
});
分享到:
评论

相关推荐

    highcharts

    Highcharts是一款强大的JavaScript图表库,用于在Web上创建交互式的图表和图形。它支持各种类型的图表,包括柱状图、折线图、饼图、散点图等,为数据可视化提供了丰富的选择。以下是对Highcharts及其相关知识点的...

    Highcharts-9.3.2.zip

    标题中的"Highcharts-9.3.2.zip"表明这是一个包含Highcharts库版本9.3.2的压缩文件,开发者可以下载并解压来使用这个版本的库。 在描述中提到了几个关键点,首先,Highcharts兼容IE6及以上的浏览器,这在现今许多...

    highcharts示例代码(官方例子)

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建出各种美观且功能丰富的图表,包括折线图、柱状图、饼图、散点图等。这款库以其易用性、灵活性和高性能著称,适用于数据可视化的...

    Highcharts最全示例程序

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,如折线图、柱状图、饼图、散点图等。本压缩包"Highcharts-2.3.2"包含了Highcharts 2.3.2版本的源码和...

    highcharts中文帮助文档(API)

    Highcharts是一个功能丰富的JavaScript图表库,其文档在中文社区中受到了广泛的关注。Highcharts支持多种图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图以及综合图表。作为图表库中的佼佼者,Highcharts...

    3D图表Highcharts(3D)

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建出各种精美、交互性强的2D和3D图表。在“3D图表Highcharts”这个主题中,我们将深入探讨如何利用Highcharts来实现三维图表的制作,以及它在数据可视化...

    Highcharts图表库 v9.3.3.zip

    Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,帮助开发者轻松创建交互式的图表。v9.3.3是Highcharts的一个更新版本,带来了更多功能...

    highcharts的js文件

    Highcharts是一款强大的JavaScript图表库,用于在Web应用中创建各种数据可视化效果,如柱状图、曲线图、饼图等。这个压缩包包含的是Highcharts的JavaScript文件,这些文件是生成图表所必需的。 首先,Highcharts的...

    highcharts去掉水印的方法

    ### Highcharts去掉水印的方法 在使用Highcharts这一强大的JavaScript图表库时,有时我们可能会遇到一个默认设置:图表上带有官方的水印标志。对于一些商业应用或是希望提高图表美观度的需求来说,去除这些水印是...

    highcharts简单的饼图demo

    Highcharts是一款强大的JavaScript图表库,用于在Web上创建各种数据可视化图表,如柱状图、折线图、饼图等。在这个"highcharts简单的饼图demo"中,我们将深入探讨如何利用Highcharts来构建一个基本的饼图,并根据...

    网页图表Highcharts实践教程基础篇

    网页图表Highcharts实践教程基础篇主要涵盖了如何使用Highcharts库创建和定制各种图表,以便在网页上呈现数据。Highcharts是一款强大的JavaScript库,专为Web开发者设计,用于生成高质量的数据可视化图表。它支持...

    jquery Highcharts jquery Highcharts

    Highcharts是一款强大的JavaScript图表库,它能够为网页和应用程序提供丰富多样的数据可视化效果。基于jQuery库,Highcharts使得在Web页面上创建交互式图表变得简单易行。在这个压缩包中,很可能包含了Highcharts的...

    highcharts-zh_CN.js 文件下载

    Highcharts 是一款强大的JavaScript图表库,它用于在Web页面上创建各种交互式的图表,如折线图、柱状图、饼图等。Highcharts-ZH_CN.js是Highcharts的中文语言包,它提供了中文本地化的支持,使得图表的标题、图例、...

    Highcharts-7.2.1IE8好用.rar

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它支持创建各种类型的图表,包括但不限于柱状图、饼图、线图、散点图等。在"Highcharts-7.2.1IE8好用.rar"这个压缩包中,显然包含的是Highcharts的一个版本...

    highcharts图表插件(中文包和本地下载)

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种类型的交互式图表,包括折线图、柱状图、饼图、散点图等,为数据可视化提供了强大的支持。本压缩包资源主要包含以下几个核心...

    Java和Highcharts实现折线图

    在这个场景中,我们将探讨如何使用Java和Highcharts这两个工具来实现一个动态的、交互式的折线图。Highcharts是一个流行的JavaScript库,专门用于创建高质量的图表,而Java则作为后端语言,负责处理数据并将其传递给...

    highcharts好用的前端统计js

    Highcharts是一款广泛应用于前端开发中的JavaScript图表库,它以其易用性和灵活性著称,能够帮助开发者轻松创建出各种丰富的数据可视化效果。这个压缩包文件名"highChart"可能包含了Highcharts的相关示例代码或者...

    highcharts案例,附js,可以直接使用

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如饼图、柱状图、线图、散点图等。这个压缩包包含了一系列的Highcharts使用案例,对于前端开发者来说,是非常宝贵的参考资料。 ...

Global site tag (gtag.js) - Google Analytics