专栏首页令仔很忙新手学HighCharts(一)----基本使用

新手学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的使用也只是处于会用的阶段,具体每一种图表在哪一种场景下使用还是不确定的,在后面的博客中会进行深入的研究!期待!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 万字长文盘点python的Matplotlib使用 | 【推荐收藏】

    Matplotlib 是 Python 中最基本的可视化工具,官网里 ((https://matplotlib.org/) 有无数好资料,但这不是重点,本文肯定...

    AI算法与图像处理
  • 免费的图表工具

    Ajax MGraph 基于 Prototype.js 的 Ajax 图表库,纯 XHTML 和 CSS 实现。

    DougWang
  • 微信小程序1

    小程序组件化开发框架 https://tencent.github.io/wepy/

    达达前端
  • 如何使 highchart图表标题文字可选择复制

    初期想了蛮久也搜了蛮多,没搜到,找到的结论是图表使用的是svg实现,必然无法选择文字,似乎是个死问题,已经濒临放弃

    书童小二
  • Highcharts导出图片

    Highcharts是在做项目涉及到统计图的时候大家的首选,同时也会用到highcharts的export功能,将统计图导出为图片,刚好,最近也遇到了这样的事情...

    lzugis
  • 酷炫 | 比较6种类型和14种数据可视化工具

    开头先说一件重要的事情,最近联合几个小伙伴(有在校研究生博士以及工作的),共同建立了一个秋招互助交流群,希望在算法岗越来越积累的时期,帮助大家共同进步,多多交流...

    AI算法与图像处理
  • 12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力。图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理...

    用户4962466
  • 50种制作图表JS库

    在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的...

    阳光岛主
  • 如何在 Highcharts 图中当所占百分比为 0 时不显示0%

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券