数据展示前端框架Highcharts介绍

  Highcharts 是Highsoft提供的一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表等。Highcharts特点：兼容性强、图表的主题类型多、操作性强、使用简单。除了Highcharts以外，Highsoft还提供了Highstock和Highmaps，分别显示分时数据和地图。

  一般将Highcharts和jQuery一起使用，所以需要引入highcharts.js和jquery.min.js两个js文件；如果需要使用Highstock，那么需要需要引入highstock.js；Highmaps需要引入highmaps.js。对应js下载地址:http://www.hcharts.cn/product/download.php。这里选用highcharts4.1.8和highmaps1.1.8。

一、Highcharts组件/属性

  title: 图表标题，用于描述图表的作用。默认为chart title，设置为null就不显示。
    subTitle: 副标题，不是必须的，可以没有。
    exporting： 导出功能按钮，默认没有，必须通过引入exporting.js即可增加图表导出为常见文件功能。
    Tooltip: 数据提示框，当鼠标悬浮到某个数据点的时候，以提示框的形式提示节点数据，比如该点的值、数据单位等。可以通过自定义格式化函数动态指定。
    Series：数据列，具体显示数据。一个图表中可以有多个数据列，比如权限图中，一条曲线就是一个数据列。
    Legend: 图例，用不同的形状、颜色、文字等来标示不同的数据列，通过点击图例可以达到显示和隐藏该数据列的效果。
    Credits: 图表版权信息，显示在图表右下角的信息，默认为highchart官网。可以进行修改。
    yAxis: y坐标轴。默认显示在左侧。
    xAxis: x坐标轴。默认显示在底部。
    PlotLines: 标示线(辅助线)，比如可以显示平均值线、最高值线等。
    PlotBands：标示区域(分辨带)。

highchart组成部分

二、Highcharts支持的图表类型

  三、Highcharts API

  highcharts的api其实就是它各个不同组件的一个实现，参考Highcharts组件/属性说明&http://www.hcharts.cn/api/index.php

  四、Highcharts资源文件目录介绍

  五、案例

    1. 显示一个静态的折线图，要求显示data1.txt文件中的气象数据。
    2. 将第一个案例改成直方图，并在每个方块上显示温度值。
    3. 在第一个案例中进行修改，不显示版权信息，并将折线图更改为曲线图。
    4. 在第三个案例中进行修改，进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候，显示辅助线，另外要求分别显示平均最高气温和最低气温的辅助线；要求legend显示在覆盖图表，并显示在左上角；要求数据提示框同时显示最高温度和最低温度&今日平均温度。
        a. 显示中文输出
        b. 定制legend
        c. 定制tooltip
        e. 显示平均温度辅助线(作业：当最高温度不显示的时候，最高平均温度这个辅助线也不显示，同理最低温度一样。)
            解决方案：(为了方便操作，可以将legend的属性floating修改为false，然后将最低气温的第一个值改成11，这样方便操作)
                公用部分： 使用自定义属性将平均温度辅助线分别添加到对应属性列中(也可以不添加)。
                i: 使用chart属性里面的events中的redraw方法，参考属性this.series[i].visible属性，该属性如果为true，表示该数据列显示，如果为false，表示该数据列不显示。然后再分别进行操作。
                ii：使用plotOptions中的series的events事件中的hide和show事件，这个就不用参考visible属性。
        f. 显示辅助线（x轴上）        
        
    5. 显示一个饼图，要求显示data2.txt中的浏览器用户数据。
    6. 在第5个案例的基础上，要求点击某个浏览器扇形后，在另外一个容器中显示该浏览器具体的用户使用数据，具体数据在data3.txt中。
    7. 显示中国各省份用户ip访问量的展示图，具体数据在data4.txt。
        需要下载中国地图js：http://code.highcharts.com/mapdata/
        

案例源码：https://download.csdn.net/download/JiShuiSanQianLi/12607368

注意：
    1. highcharts和highmaps默认显示高度为400px，如果需要显示比较大的一个图形，可以给外层的div添加一个style属性，并给定height为比较大的值。
    
 

本文地址：https://blog.csdn.net/JiShuiSanQianLi/article/details/107306459