Highchart属性笔记

Highchart一些平时不常用到的属性，偶尔想用时，查看API文档不易找到，耗费时间，本文只是为了让自己能够快速找到这些属性而记录的笔记。持续更新...

1.当图表没有数据时，图表中会显示相应的文字说明。该功能需要额外的引入 http://cdn.hcharts.cn/highcharts/modules/no-data-to-display.js （require('highcharts/modules/no-data-to-display.js')(Highcharts)）

  Highcharts.setOptions({
    lang: {
      noData: '暂无数据'
    }
  })

暂无数据

2.图表未绘制前显示loading。当数据需要从后台获取时，可以控制在图形上暂时显示Loading（"Loading"文本可在lang对象中修改）

var chart = Highcharts.chart('container', option) // option为highchart自定义参数 
chart.showLoading() // 加载选项控制着图表覆盖区域载入画面的显示效果
chart.hideLoading() // 隐藏效果

loading.png

3.Highchart默认在图表的右下角放置版权信息的标签。若想取消版权信息显示：

credits: {
  enabled: false
}

credits.jpg

4.使图层半透明以避免遮挡后面的图层（特别是图表类型为area）

plotOptions: {
  series: { // 针对所有图表有效的通用配置，若只针对area，series可改为area
    fillOpacity: 0.5 // 设置半透明
  }
}

图层半透明以避免遮挡后面的图层

5.Highstock中的dataGrouping，表示是否将指定数量的数据合并展现为一个点

plotOptions: {
  series: { // 针对所有图表有效的通用配置
    dataGrouping: { // 针对highstock,将指定数量的数据合并展现为一个点
      enabled: false
    }
}

同样的数据，‘合并多个数据为一个点’ VS ‘每个点的数据都展示出来’

合并多个数据为一个点

每个点的数据都展示出来

6.Highstock初始化x轴的时间显示区域

xAxis: {
  min: time - 30 * 60 * 1000, // time为某个时间的时间戳
  max: time
}

初始化控制x轴的时间显示区域

7.给图表里的线添加点击click事件

series: {
  // ...
  events: {
    click () { // 除了click事件，还可添加mouseOut、mouseOver等事件
      // 点击图表后的回调函数
    }
  },
  data: [{
    events: {
      click () {
        // 点击该数据区域后的回调函数
      }
    }
  }]
}

8.添加网格

xAxis: {
  gridLineWidth: 1
}，
yAxis: {
  gridLineWidth: 1
}

gridLine.png

9.改变网格密集情况，即改变刻度显示间距

yAxis: {
  gridLineWidth: 1,
  tickPixelInterval: 10 // 默认70
}

tickPixelInterval.png

10.给Y轴坐标的刻度添加单位

yAxis: {
  labels: {
    format: '{value}M'
  }
}

改变y轴刻度文案

11.改变鼠标移动上去时显示的内容，例如给数据添加%

tooltip: {
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
}

自定义显示文案

12.改变图例显示的内容(如上图)

legend: {
  labelFormatter: function () { // 显示极值
    return '<span style="min-width: 65px;display:inline-block; text-align: right;">' + this.name + ':</span> ' + series[this.index].desc
  }
}

13.部分曲线默认隐藏: 设置series属性下的visible

series: [{
  data: [……]
}, {
  data: [……]
}, {
  data: [……],
  visible: false
}]

highcharts部分曲线默认隐藏

14.js设置曲线显示或隐藏(如上图)

var chart = Highcharts.stockChart('container', {<!-- option -->})
chart.series[2].visible = this.isVisible
if (this.isVisible) {
  chart.series[2].show()
} else {
  chart.series[2].hide()
}

原文：
Highchart属性笔记

最后编辑于：2020.02.12 18:51:10