怎麼讓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下載，更多示例將會持續更新，歡迎關注。