新手学HighCharts（一）----基本使用

令仔很忙

发布于 2018-09-14 16:27:20

2.1K0

发布于 2018-09-14 16:27:20

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'
                }
            }
        }]
    });
}