highcharts的基本运用与分析

一、highcharts
    1.简介
        highcharts 是一个纯js编写的图标库,能够简单便捷的在web网站上添加交互性的图表,支持：直线图,曲线图,面积图,柱状图,饼状图,散点图等18中不同类型的图表
        优点：
            免费开元,兼容性好,纯js开发,图表类型丰富,具有动态性,图表导出和打印功能,坐标轴设置,图表缩放,支持外部数据加载
    2. highcharts 基本组成部分
        title：标题,包含副标题subtitle,副标题是非必须部分
        series：数据列,图表上一个或多个数据系列
        axis：坐标轴,包含x(xAxis)和y轴(yAxis)
        tooltip：数据提示框,当鼠标悬浮某个数据点上时,以图框的形式展示该点数据
        legend：图例,用不同的形状,颜色,文字等表示不同的数据列,点击标识可以显示该数据列
        credits：图表的版权信息
        exporting：导出图表功能按钮,必须要引入exporting.src.js
        plotLines：提示线(辅助线)
        plotBands：标识区域(分辨带)
    3.标题
        title属性表示标题,其中的text属性是标题文本,style属性是标题的样式,副标题位置在标题正下方,可以使用x,y属性设置,text是内容,style是样式
    4，坐标轴
        xAxis: x轴
        yAxis: y轴
        style:想要设置谁的样式，就放在谁里面
        title:设置坐标轴的标题
        labels:设置值，通过formatter来格式化值的输出，函数内部的this指向该坐标轴的属性，this.value纵坐标值
    5,数据列
        series:图标中可以有多个数据列，所以该属性是一个数组，每个成员都是对象，每个对象都有两个属性
            data:数据列的数据值
            name:数据列的名称
        图表纵坐标，不设置时，会根据数据列最大值自动生成
        添加name,位置是在图例上和提示条上
        data属性设置比较自由：
            可以是数字，表示y值，x轴相互对应
            可以是数组，数组中第一项表示是x值，第二项表示y值
            可以是对象，对象中的x属性表示x值，y属性表示y值，还可以添加其他属性，比如color表示该点的颜色
   6.提示框
           tooltip：
               style：样式
               设置内容：
                   方案1：
                       formatter：渲染整个提示框内部内容
                       pointFormatter：渲染该点提示框内容
                   方案2：
                       headerFormat：渲染提示框标题
                       pointFormat：渲染提示框内容信息
       7.图例
           legend：与图表中线条一一对应
           是一个对象,可以设置属性,背景颜色backgroundColor
       8.署名
           credits：表示版权信息
           text：设置内容
           href：设置链接
           style：设置样式
           enabled：表示隐藏显示
       9.数据列的色彩
           colors：对应数据列的色彩,数组
           series中添加色彩
       10.显示细节
           plotOptions
           如果设置数据列的细节,可以在series中设置,包含dataLabels表示,在dataLabels中设置format和enabled可以进行显示
           format：格式化模板
           enabled：是否隐藏
           语法：
               plotOptions:{
                   series:{
                       dataLabels:{
                           format:'{x}--{y}℃',
                           enabled:true
                       }
                   }
               }
       11.图表类型
           type数据类型：
               area：区域图
               line：直线图
               spline：折线图
               column：柱状图
               pie：饼状图
               more：综合图
           chart属性,里面设置type