使用customButton Highcharts更新工具提示

Question

当我点击切换按钮时，如何更新 工具提示？

我尝试在 button.toggle.onclickfunction（）上添加此（ this.tooltip [0] .update ）： -

onclick: function () {
  this.yAxis[0].update({
    labels: {
      formatter: function() {
        return Highcharts.numberFormat((this.value / 1000000000).toFixed(2), 0, ',');
      }
     },
     title: {
       text: '<b>RM Billion</b>',
     }
  });
  this.tooltip[0].update({
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br> ' + this.series.name + ' : RM <b>' + Highcharts.numberFormat((this.y / 1000000).toFixed(2), 0, ',') + '</b>';
      }
    }
  });
}

我认为添加 this.tooltip [0] .update 会更改/更新 工具提示，如上所示，但没有任何变化。我怎样才能做到这一点？ 以下是我目前的代码： -

Highcharts.chart('containerImport', {
    title: {
        text: 'Imports from ' + dataTitle['titleName'] + ', ' + dataYear[0] + ' - ' + dataYear[dataYear.length - 1],
        align: 'left',
        margin: 50
    },
    subtitle: {
        text: '',
        x: -20
    },
    lang: {
        toggleButtonTitle: 'Currency Format',
        contextButtonTitle: 'Print Chart'
    },
    xAxis: {
      title: {
          text: '<b>YEAR</b>',
          align: 'high'
      },
      categories: dataYear
    },
    yAxis: {
      title: {
          text: '<b>RM Million</b>',
          style: {
            fontFamily: 'Arial'
          },
          align:'high',
          rotation:0,
          y: -13,
      },
        labels: {
          formatter: function() {
            return Highcharts.numberFormat((this.value / 1000000).toFixed(2), 0, ',');
          }
        }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br> ' + this.series.name + ' : RM <b>' + Highcharts.numberFormat((this.y / 1000000).toFixed(2), 0, ',') + '</b>';
      }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: dataTitle['titleName'],
        data: totalDataTrade
    }],
    exporting: {
      enabled: true,
      buttons: {
        contextButton: {
                _titleKey: 'contextButtonTitle',
            },
        toggle: {
                    _titleKey: 'toggleButtonTitle',
                    text: '$',
                    menuItems: [{
                      text: 'Billion',
                      onclick: function () {
                        this.yAxis[0].update({
                          labels: {
                            formatter: function() {
                              return Highcharts.numberFormat((this.value / 1000000000).toFixed(2), 0, ',');
                            }
                          },
                          title: {
                            text: '<b>RM Billion</b>',
                          }
                        });
                      }
                    }, {
                      text: 'Million',
                      onclick: function () {
                        this.yAxis[0].update({
                          labels: {
                            formatter: function() {
                              return Highcharts.numberFormat((this.value / 1000000).toFixed(2), 0, ',');
                            }
                          },
                          title: {
                            text: '<b>RM Million</b>',
                          }
                        });
                      }
                    }, {
                      text: 'Hundred Thousand',
                      onclick: function () {
                        this.yAxis[0].update({
                          labels: {
                            formatter: function() {
                              return Highcharts.numberFormat((this.value / 100000).toFixed(2), 0, ',');
                              // return Highcharts.numberFormat((this.value / 100000), 2, '.');
                            }
                          },
                          title: {
                            text: '<b>RM Hundred Thousand</b>',
                          }
                        });
                      }
                    }]
                },
      }
    }
});

任何形式的帮助将不胜感激！先谢谢你。

Answer 1

在系列中移动tooltip属性，然后使用Series.update()

onclick: function() {
        this.series[0].update({
          tooltip: {
            pointFormat: 'tooltip changed'
          }
        });
      }

示例：https://jsfiddle.net/r4dfhkgy/