xplly'Blog

标签

文档

报表

字数

1620 字

阅读时间

8 分钟

一、概述

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表

地址：官网

1.1 引用属性解释

（1）chart ：图表基本属性
    a)	plotBackgroundColor  区域背景颜色
    b)	plotBorderWidth  区域边框宽度
    c)	plotShadow  区域阴影
    d)	type  图表类型
（2）title ：图表标题
    a)	text 标题文本
（3）tooltip ：工具提示
    a)	pointFormat  工具提示显示格式
（4）plotOptions：区域选项
    a)	allowPointSelect  点击区域后选择
    b)	cursor  光标类型
    c)	dataLabels  数据标签
    d)	showInLegend  是否显示图例
（5）series： 数据组
    a)	name  名称
    b)	colorByPoint  点的颜色
    c)	data  数据

二、案例

2.1 Demo

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
    <title>highcharts图表报表</title>
    <link rel="stylesheet" href="css/charts_demo.css">
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入highcharts -->
    <script src="js/highcharts.js"></script>
    <script src="js/highcharts-3d.js"></script>
    <script src="js/highcharts-more.js"></script>
    <script src="js/drilldown.js"></script>


</head>
<body>
<div id="app" class="my-box">
    <div class="my-box-left">
        <button @click="columnCharts">统计各部门人数</button> <br/> <br/>
        <button @click="lineCharts">月份入职人数统计</button> <br/> <br/>
        <button @click="pieCharts">员工地方来源统计</button> <br/> <br/>
    </div>
    <div class="my-box-right">
        <!-- 图标容器DOM -->
        <div id="container" style="height:450px;"></div>
    </div>
</div>
</body>
<script>
 new Vue({
     el:"#app",
     data:{},
     methods: {
         columnCharts() {

         },
         lineCharts(){

         },
         pieCharts(){

         }
     }
});
</script>
</html>

2.2 配置项

一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）等。

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列配置是个数组，也就是数据配置可以包含多个数据列。一个name和data表示一组数据列，数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。

data两种取值：

数值数组。在这种情况下，配置数组中的数值代表 Y 值，X 值则根据 X 轴的配置，要么自动计算，要么从 0 起自增；在分类轴中， X 值就是 categoies 配置

包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表 X，第二个值代表 Y；如果第一个值是字符串，则代表该点的名字，并且 X 值会如 1 中所说的情况决定。数组集合的实例：

var charts = Highcharts.chart('container', {
  // Highcharts 配置
   // 图表标题，包含标题和副标题（subTitle），其中副标题不是必须的。
    title: {
    text: '我是标题'
    },
    subtitle: {
        text: '我是副标题'
    }
    // 坐标轴包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。
    // 坐标轴标签（分类）。Labels常用属性有`enabled`、`formatter`、`step`、`staggerLines`
    // enabled 是否启用Labels。x，y轴默认值都是`true`，如果想禁用（或不显示）Labels，设置该属性为`false`即可。
    // Formatter 标签格式化函数 `this.value`代码坐标轴上当前点的值（也就是x轴当前点的x值，y轴上当前点的y值）
    // Step Labels显示间隔，数据类型为number（或int）
xAxis:{
   title:{
       text:'x轴标题'
   }
}
yAxis:{
   title:{
       text:'y轴标题'
   }
}

// 图标类型
chart: {
    type: 'spline'
}
});

2.3 柱状图

后台sql：

sql

select dept_name deptName,count(u.id) num from tb_dept d LEFT JOIN tb_user u on  d.id=u.dept_id GROUP BY dept_name

页面：

在highcharts_index.html页面中参考highcharts官网上的柱状图完成以下代码

https://www.highcharts.com.cn/demo/highcharts/column-basic

javascript

 methods: {
         columnCharts() {
             axios.get("/stat/columnCharts").then(res => {
                 let datas = res.data;
                 let titles=[];  //x轴上显示的数据
                 let values=[]; //y轴上显示的数据
                 for (let i = 0; i < datas.length; i++) {
                     titles[i] = datas[i].deptName;
                     values[i] = datas[i].num;
                 }
                 Highcharts.chart('container', {
                     chart: {
                         type: 'column'
                     },
                     title: {
                         text: '各部门人数'
                     },
                     xAxis: {
                         categories:titles,
                         crosshair: true
                     },
                     yAxis: {
                         min: 0,
                         title: {
                             text: '人数'
                         }
                     },
                     tooltip: {
                         // head + 每个 point + footer 拼接成完整的 table
                         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                             '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                         footerFormat: '</table>',
                         shared: true,
                         useHTML: true
                     },
                     plotOptions: {
                         column: {
                             borderWidth: 0
                         }
                     },
                     series: [{
                         name: '各部门人数',
                         data: values
                     }]
                 });


             })
         },
         pieCharts(){},
         lineCharts(){}
     }

2.4 折线图

后台sql：

sql

select m.name,IFNULL(t.num,0) num from tb_month m LEFT JOIN (
select DATE_FORMAT(hire_date,'%m') months ,count(id) num from tb_user GROUP BY DATE_FORMAT(hire_date,'%m')
) t ON m.name=t.months

页面：

在highcharts_index.html页面中参考highcharts官网上的柱状图完成以下代码

https://www.highcharts.com.cn/demo/highcharts/line-basic

javascript

lineCharts(){
    axios.get("/stat/lineCharts").then(res=>{
        let datas = res.data;
        let values=[]; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
            values[i] = datas[i].num;
        }
        var chart = Highcharts.chart('container', {
            title: {
                text: '月份入职人数统计'
            },
            yAxis: {
                title: {
                    text: '入职人数'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: [{
                name: '入职人数',
                data: values
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });

    })
}

2.5 饼状图（可下钻）

下钻的效果

https://www.highcharts.com.cn/demo/highcharts/column-drilldown

https://www.highcharts.com.cn/demo/highcharts/pie-drilldown

如果想要下钻的效果，需要在多引入一个js，从下载的压缩包中找到后放到项目中，并且在html中引入

html

<script src="js/drilldown.js"></script>

后台返回数据格式：

json

[{id:"河北省","drilldown":"河北省","name":"河北省","y":10,"data":[{"name":"石家庄","y":4},{"name":"唐山","y":3},{"name":"保定","y":3}]}]

页面逻辑：

javascript

 pieCharts(){
             axios.get("/stat/pieCharts").then(res=>{
                let datas = res.data;
                 Highcharts.chart('container', {
                     chart: {
                         type: 'column'
                     },
                     title: {
                         text: '公司原因地方来源'
                     },
                     xAxis: {
                         type: 'category'
                     },
                     yAxis: {
                         title: {
                             text: '人数'
                         }
                     },
                     legend: {
                         enabled: false
                     },
                     plotOptions: {
                         series: {
                             borderWidth: 0,
                             dataLabels: {
                                 enabled: true,
                                 format: '{point.y}'
                             }
                         }
                     },
                     tooltip: {
                         headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                         pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                     },
                     series: [{
                         name: '省份',
                         colorByPoint: true,
                         data: datas
                     }],
                     drilldown: {
                         series: datas
                     }
                 });

             })

         }

一、概述 ​

1.1 引用属性解释 ​

​

二、案例 ​

2.1 Demo ​

2.2 配置项 ​

2.3 柱状图 ​

2.4 折线图 ​

2.5 饼状图（可下钻） ​

​

一、概述

1.1 引用属性解释

二、案例

2.1 Demo

2.2 配置项

2.3 柱状图

2.4 折线图

2.5 饼状图（可下钻）