开发者社区> 令仔很忙> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

新手学HighCharts(一)----基本使用

简介: <div class="markdown_views"> <p></p> <div class="toc"> <ul> <li><a href="#highcharts%E7%AE%80%E4%BB%8B">HighCharts简介</a></li> <li> <a href="#highcharts%E7%9A%84%E4%BD%BF%E7%94%A8">HighCharts
+关注继续查看

HighCharts简介


    最近做的项目需要用到数据分析,图表显示,之前做项目的时候用到过highcharts,不过也只是简单的会用而已,然后再网上查了查highcharts的优点:

Highcharts使用的一些优点的介绍。
一、首先、使用Highcharts能快速、简单的做出各种诸如柱状图、饼状图、曲线图等多种形式的统计图或者走势图。使用者只需要提供对应的数据、以及简单的Highcharts的配置即可。使用简单。
二、跨语言跨平台支持多种浏览器。Highcharts是基于js制作出来的。是一个js类库。无论你使用什么后端语言,都可以很方便的使用Highcharts来做图表或者统计。
三、使用门槛极低、稍微看一下API都可以做出各种符合要求的统计图表等。
数据灵活。支持xml 和json。

Highcharts是一款开源图表库,开源但不完全免费。Highcharts针对个人用户及非商业用途免费,商业用途需要购买授权。

这里写图片描述

HighCharts的使用


下载插件

    若要用HighCharts的话,得先引用它的插件,插件不大,核心文件只有一个highcharts.js文件,可以去HighCharts官网上去下载:

http://www.highcharts.com/download

如果需要导出图表,则需要exporting.js文件

如果需要一些特殊的图形呈现,则还需要下载highcharts-more.js

具体应用

FIRSTLY

    首先,下载完成之后,就把js文件引用到项目中

<!--highcharts核心文件-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<!--导出需要引用的文件-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>

SECONDLY

    在界面中定义<div>盒子:

<div class="row">
        <div id="pieChart" style="float: left;  height: 550px;margin-left:20px;"></div>
        <div id="columnChart" style="float: left;  height: 550px; margin-left:20px;"></div>
    </div>

THIRDLY

    在js中定义如何接受数据,和如何显示表格的样式,highcharts的这些样式都是可以通过js控制的,因为highcharts本身就是用JavaScript编写的一个图表库。在这里我只是用饼形图,和柱状图做例子。

//图标分析公用部分--同时显示两个图表(饼型和柱状)
function chartAnalyze(Result,title){
    /* alert(data); */
    var strJson = Result;
    var data = [];
    for ( var i in strJson) {
        var serie = new Array(strJson[i].name, strJson[i].count);
        data.push(serie);
    }
    PieChart(data,title);
    ColumnChart(data,title);
}

//图标分析公用部分--只显示一个图表(柱状)
function scoreAnalyze(result,title){
    var strJson = Result;
    var data = [];
    for ( var i in strJson) {
        var serie = new Array(strJson[i].name, strJson[i].count);
        data.push(serie);
    }
    ColumnChart(data,title);
}

//饼图
function PieChart(series,title) {
    $('#pieChart').highcharts({
        chart : {
            plotBackgroundColor : null,
            plotBorderWidth : null,
            plotShadow : false
        },
        credits : {
            enabled : false,
        },
        title : {
            text : title
        },
        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} %'
                },
                showInLegend : true
            }
        },
        series : [ {
            type : 'pie',
            data : series
        } ]
    });
}

//柱状图
function ColumnChart(series,title) {
    $('#columnChart').highcharts({
        chart: {
            type: 'column',
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        xAxis: {
            categories: [

            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '总数'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '数量',
        },
        series: [{
            name: 'Population',
            data: series,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif',
                    textShadow: '0 0 3px black'
                }
            }
        }]
    });
}

FINALLY

    js接受从后台传到界面上的json对象,然后绑定到图表上进行显示。秀一下最终的结果。

这里写图片描述

    现在对于highcharts的使用也只是处于会用的阶段,具体每一种图表在哪一种场景下使用还是不确定的,在后面的博客中会进行深入的研究!期待!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用mpvue开发小程序教程(二)
在上一篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构。
1429 0
使用mpvue开发小程序教程(一)
前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用),这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。
2150 0
使用mpvue开发小程序教程(六)
在上一章节中,我们列举了在Vue中能用但在mpvue中不能用或需要特别注意的特性,在实际开发前了解一下还是很有必要的,可以避免浪费找错误的时间。 如果你使用过原生的小程序框架,你一定经历过或思考过怎么解决以下的问题: 怎么存放可全局访问的变量? 页面...
1186 0
使用mpvue开发小程序教程(五)
在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁、条理清楚、各司其职,这样会让代码变得更易理解和维护,间接的也提升了代码的健壮性,降低出现Bug的几率,即使出现Bug,也会更容易进行定位和调试。
1784 0
使用mpvue开发小程序教程(四)
在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步。
1325 0
使用mpvue开发小程序教程(三)
【注意事项】由于mpvue也在不断的开发演进,大家在不同时间段使用的时候,可能会遇到和文中的做法不一样的地方。请关注文章的评论区中大家的讨论,寻找解决方案,或者及时查阅官方文档,避免陷入版本更新的坑里哦。
938 0
5个很棒的 React.js 库,值得你亲手试试!
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! React在过去几年变得越来越受欢迎。随之而来的是越来越多的库的发布,给我们带来了新的可能性,但最重要的是让开发这工作变得越来越简单。
156 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
QQ移送页面框架优化实践
立即下载
QQ移动页面框架优化实践
立即下载