怎么让Highcharts的提示框tooltip自动轮播

1. 怎么让 Highcharts 的提示框 tooltip 自动轮播?

个人 Highcharts 的颜值感觉比 ECharts 高那么一点点，比如 3D 饼图、3D 环形图 就很酷炫，ECharts就没有或者说做出来效果很一般。
但是，如果是公司的项目的话，先问问你们老板愿不愿意花钱购买授权，Highcharts对于个人网站，学校网站和非盈利机构免费，其他都是要收费的。之前做公司的项目，UI 设计了个酷炫的 3D 饼图，用Highcharts 做完才发现是收费的。。。

如果是个人网站或者公司购买了授权，那可以放心使用。那怎么让 tooltip 自动轮播呢？可以利用 tooltip.refresh 方法、给 chart.events 加上 load 事件来实现。

2. 代码怎么写呢？

我们直接上代码：

  <div id="container" style="height: 400px"></div>
  <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
  <script type="text/javascript">
    var timer = null;
    var chart = Highcharts.chart('container', {
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0
        },
        events: {
          // load，图表加载完成时触发
          load: function () {
            var chart = this;
            var points = chart.series[0].points;
            var len = points.length;
            var i = 0;
            timer && clearInterval(timer);
            timer = setInterval(function () {autoTooltip(points[i]);
              i++;
              if (i === len) {i = 0;}
            }, 1000);
          }
        }
      },
      title: {text: null},
      tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
            enabled: true,
            format: '{point.name}'
          }
        }
      },
      series: [{
        type: 'pie',
        name: '浏览器占比',
        data: [['Firefox', 45.0],
          ['IE', 26.8],
          {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['Others', 0.7]
        ]
      }]
    });
    function autoTooltip(point) {chart.tooltip.refresh(point);
    }
  </script>
  <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
  <script type="text/javascript">
    var timer = null;
    var chart = Highcharts.chart('container', {
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0
        },
        events: {
          // load，图表加载完成时触发
          load: function () {
            var chart = this;
            var points = chart.series[0].points;
            var len = points.length;
            var i = 0;
            timer && clearInterval(timer);
            timer = setInterval(function () {autoTooltip(points[i]);
              i++;
              if (i === len) {i = 0;}
            }, 1000);
          }
        }
      },
      title: {text: null},
      tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
            enabled: true,
            format: '{point.name}'
          }
        }
      },
      series: [{
        type: 'pie',
        name: '浏览器占比',
        data: [['Firefox', 45.0],
          ['IE', 26.8],
          {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['Others', 0.7]
        ]
      }]
    });
    function autoTooltip(point) {chart.tooltip.refresh(point);
    }
  </script>

tooltip.refresh(points, e)是在论坛里面看到有人提到源码里面有这个方法，但是官方文档里面并没有提到，不知道是出于什么样的考虑。

3. 示例代码下载

可以复制以上代码运行查看使用效果，也可以到 GitHub: https://github.com/Jackyyans/code123 下载，更多示例将会持续更新，欢迎关注。