highcharts框架使用总结

时间:2022-12-07 14:51:26

  Highcharts官网地址:https://www.hcharts.cn/products/highcharts
  首先需要引入jQuery框架,然后包含Highcharts框架需要使用到的js文件,最新版本5.0.7的js是在code目录下,其中highcharts.js文件是必需的,其他文件根据需要使用的图表需要引入,如果需要使用图表的打印功能的话,需要引入modules/exporting.js文件。

基本使用方法:
  在html页面为某个容器元素(如:div)定义一个id,然后在渲染页面的js中调用highcharts框架的方法:
Highcharts.chart(id, option);
其中id是页面某个元素的id,即我们希望图表在页面上展示的位置,option则是图表的一个配置对象变量,下面主要针对图表的这个配置变量进行讲解。

Highcharts.chart(id, {
  chart: {//图表配置
    type: 'line',            //图表默认类型,默认:line(pie:饼图,column,柱状图;line,折线图,funnel:漏斗图...)。
    height: null,            //图表高度,默认:null,根据容器元素高度计算。
    width: null,            //图表宽度,默认:null,根据容器元素宽度计算。
    backgroundColor: '#FFFFFF',    //图表区背景颜色,默认:#FFFFFF。
    borderColor: '#335cad',      //图表边框颜色,默认:#335cad。
    borderWidth: 0,          //图表边框宽度,默认:0,需要设置图表边框颜色的话需要将其设置大于0。
    borderRadius: 0,          //图表边框的圆角半径,默认:0。
    margin: [0,0,0,0],        //图表外边缘和绘图区域之间的边距,默认:[0,0,0,0](顺序:上右下左)。
    polar: false            //默认:false。当设置为true时,直线图、曲线图、面积图、柱状图等笛卡尔图会转成极地图,
                      //例如,蜘蛛图就需要将其设置为true。极地图需要额外的引入highcharts-more.js才能使用。
  },
  title: {//标题配置
    text: 'Chart title',         //图表标题文字,默认:Chart title。若不想显示标题可设置为null。
    align: 'center',          //图表标题水平对齐方式,默认:center,可选:left、center、right。
    floating: false,          //默认:false,如果设置为true,标题将不占用图表区的位置。
    style: {                 //标题样式配置
        color: '#000000',
        fontWeight: 'bold',
        fontSize: '20px'
    }
  },
  exporting: {//导出配置
    enabled:true          //是否启用导出模块,默认:true。若想去除图表右上角导出按钮则设置为false。
  },
  credits: {//版权配置
    enabled:true          //是否显示版权信息,默认:true。若想去除图表右下角highcharts官网链接则设置为false。
    text:'Highcharts.com',      //版权信息显示内容,默认:Highcharts.com。
    href: ''              //版权信息链接地址,默认:http://www.highcharts.com。
  },
  tooltip: {//数据提示框配置
    enabled: true,          //是否启用数据提示框,默认:true。
    shared: true,               //数据提示框共享(一个x轴值对应有多个y轴值时,多个y轴值共享提示框)
    backgroundColor: '',      //数据提示框背景色,默认:rgba(247,247,247,0.85)。
    borderColor: null,        //数据提示框边框颜色,默认:null,使用该数据列或该点的颜色。
    borderWidth: 1,       //数据提示框边框宽度,默认:1。
    borderRadius: 3,        //数据提示框圆角半径,默认:3。
    pointFormat: '',        //数据提示框中该点的html代码。变量使用花括号括起来。
    pointFormatter: function(){}, //回调函数,返回格式化提示框中该点的html代码。
  },
  xAxis: {//x轴配置
    max: null,            //坐标轴最大值,当设置为null时,将会自动计算。
                    //当endOnTick参数值为true时,max值将会向上取整。
    min: null,            //坐标轴最小值,当设置为null时,将会自动计算。注意:对数轴最小值不能为0,否则会出错。
                    //如果设置了startOnTick为true时,最小值可能会进行向下取整。
    opposite: false,        //是否将坐标轴显示在对立面,默认:false。
                    //默认情况下x轴在图表下方,y轴在左边,设置为true后,x轴将在上方显示,y轴在右边显示。
    type: linear,          //坐标轴类型,默认:linear。
                   //可选:linear(线性轴)、logarithmic(对数轴)、datetime(时间轴)、category(分类轴)
    categories: null,       //分类坐标轴中的分类,定义x轴刻度显示内容,默认:null。
    tickInterval:             //间隔多少显示刻度
    tickmarkPlacement: 'on',    //本参数只对分类轴有效。当值为on时刻度线将在分类上方显示,当值为between时刻度线将
                    //在两个分类中间显示。当tickInterval为1时,默认是between,其他情况默认是on。
    labels: {//坐标轴标签配置
      enabled: true,       //是否显示坐标刻度值,若不想显示则设置为false。
      rotation: -45,           //x轴刻度标题旋转一定角度
      formatter: function(){},  //回调函数,返回在刻度位置显示的格式化内容。
    },
    //十字准星线配置
    crosshair: true,           //若是柱状图直接配置true
     crosshair : {            //其他图表类型需要配置样式
       width: 1,
       color: 'gray',
       dashStyle: 'Solid'
     },
    visible: true          //是否显示坐标轴,默认:true。包含坐标轴、坐标轴标题、坐标轴轴线、坐标轴标签等。
  },
  yAxis: {//y轴配置
                   //配置参数和x轴相同...
  },
  scrollbar : {//滚动条配置
      enabled:true           //启用滚动条
  },
  series: {//数据列配置
    cursor: 'pointer',       //鼠标在数据列上的形状,默认是箭头,可设置为pointer(手型)。
    name: '',          //数据列名称,用于在legend(图例)、tooltip(数据提示框)中显示。
    data: [{          //数据列数据配置,不同类型的图表数据列配置有所差异,这里示例的是柱状图数据列配置。
    x: 1,
    y: 5,
    name: '',
    color: ''
    }]
  },
  legend: {//图例配置
    enabled: true,        //图例开关,默认:true。
    align: 'center',       //图例在图表区中的水平对齐方式,默认:center。可选:left、center、right。
    backgroundColor: ''    //背景颜色
  },
  plotOptions: {
    series: {
      marker: {
        enabled: true      //是否显示折线图上的点(折线图配置)
      },
      dataLabels: {
        enabled: true,      //是否在图表上各个数据点显示对应数据
        color: '#a3a3a3',
        formatter: function() {  //格式化
          return this.y;
        }
      }
    },
  column: {
    colorByPoint: true      //给柱状图每个点分配颜色(柱状图配置)
  }
}
});

  

问题与方案:
如果数据提示框中需要显示额外的信息,而且这个信息对于不同数据点是不同的,该怎么设置??
可以在设置图表数据的data中的每个数据点对象添加额外属性,然后使用pointFormatter在回调函数中即可访问到这个额外的属性。
拿我做过的一个实例来说:
热力图表heatmap的data中每个数据点对象原本的格式为:{x:x轴位置, y:y轴位置, value:对应点的值},我可以在里面加多一个

属性来为每个数据点存放额外的信息,如:tip: 数据点提示语,那么在pointFormatter回调函数中即可使用this.point.tip来访问这个属性了。

特别注意:
1.要确保x轴值和对应y轴值的正确对应,永远不要相信js的数组下标,js使用push方法添加数组元素之后数组中的元素并不是按push的先后顺序来排序的。
2.x轴的min和max表示的是有滚动条的时候一屏显示多少数据,y轴的min和max表示的才是最大最小值。

3.设置全局的scrollbar配置之后,只会在x轴开启滚动条,若想在y轴启用滚动条,需要在yAxis参数下添加配置:
scrollbar: {
  enabled: true,
  showFull: false
}

4. 大坑:一定要注意series中的data数组里面的元素都必须是数字类型,若是字符串则会一直得不到图表显示。。而且数组的下标一定要从0开始,否则也会无法显示图表。。。