导航器（navigator）是显示在主图下方的用来展示所有数据的数据列小图形，它提供对整个图表进行缩放、平移操作。

导航器

导航器默认显示的 Highstock 中的第一个数据列，可以使用 series.showInNavigator 来指定指定需要显示在导航器中的数据列

  1. series: [{
  2.     showInNavigator: false
  3. }, {
  4.     showInNavigator: true
  5. }, {
  6.     showInNavigator: true
  7. }]

数据列配置

导航器里的数据列配置可以通过 navigator.series 来配置，它可以对导航器里是所有数据列有效

  1. navigator: {
  2.     // 针对导航器来的所有数据列有效，注意 data 配置无效，因为该数据来源于主数据列
  3.     series: {  
  4.         type: 'areaspline',
  5.         // ...
  6.     }
  7. }

如果需要对某个数据列进行单独配置，可以在 series.navigatorOptions 中配置

  1. series: [{
  2.     showInNavigator: false
  3. }, {
  4.     showInNavigator: true,
  5.     navigatorOptions: {
  6.         color: red,
  7.         type: 'spline'
  8.     }
  9. }, {
  10.     showInNavigator: true
  11. }]

在线试一试

坐标轴配置

导航器里的坐标轴可以通过 navigator.xAxis 和 navigator.yAxis 来配置，其配置属性同普通的坐标轴，实例代码：

  1. navigator: {
  2.     xAxis: {
  3.         tickWidth: 0,
  4.         lineWidth: 0,
  5.         gridLineWidth: 1,
  6.         tickPixelInterval: 200,
  7.         labels: {
  8.             align: 'left',
  9.             style: {
  10.                 color: '#888'
  11.             },
  12.             x: 3,
  13.             y: -4
  14.         }
  15.     }
  16. }

原文: https://www.hcharts.cn/docs/navigator