Highchart属性笔记

96
Smileswlin
0.9 2018.01.18 20:14* 字数 423

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属性笔记

加微信(备注简书),便宜代购电影票,真实可靠,作者信誉保证
前端