怎么让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下载，更多示例将会持续更新，欢迎关注。