Highcharts: 基于多次检查图表是否为钻取而进行条件提示

huangapple go评论103阅读模式
英文:

Highcharts: Conditional tooltip based on multiple checking chart is drilldown or not

问题

Here are the translated code parts without the comments:

  1. tooltip: {
  2. formatter: function() {
  3. return (this.hasOwnProperty("drilldown") ? '用户数量' : '数字数量' + this.point.y);
  4. }
  5. },
  1. events: {
  2. drilldown: function(e) {
  3. this.xAxis[0].setTitle({
  4. text: '账户'
  5. });
  6. },
  7. drillup: function(e) {
  8. this.xAxis[0].setTitle({
  9. text: '来源'
  10. });
  11. }
  12. }
英文:
  1. formatter: function() {
  2. return (this.hasOwnProperty("drilldown") ? 'Count of user' : 'count of number' + this.point.y);
  3. }
  4. },

I just want to change tooltip text based on drilldown condition.

I have set Xaxis name by add event in chart and it's working So what should i do for tooltip ??

  1. events: {drilldown: function(e) {
  2. this.xAxis[0].setTitle({
  3. text: 'Accounts'
  4. });
  5. },
  6. drillup: function(e) {
  7. this.xAxis[0].setTitle({
  8. text: 'Source'
  9. });
  10. }
  11. }

答案1

得分: 1

你可以在 tooltip 的 formatter 中检查 ddDupes 图表的属性。例如:

  1. tooltip: {
  2. formatter: function() {
  3. const chart = this.series.chart;
  4. if (chart.ddDupes && chart.ddDupes.length) {
  5. return '已钻取';
  6. }
  7. return '未钻取';
  8. }
  9. }

在线演示: https://jsfiddle.net/BlackLabel/7abL0en4/

API 参考: https://api.highcharts.com/highcharts/tooltip.formatter

英文:

You can check ddDupes chart's property in tooltip's formatter. For example:

  1. tooltip: {
  2. formatter: function() {
  3. const chart = this.series.chart;
  4. if (chart.ddDupes && chart.ddDupes.length) {
  5. return 'Drilled down';
  6. }
  7. return 'Not drilled down';
  8. }
  9. }

Live demo: https://jsfiddle.net/BlackLabel/7abL0en4/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

huangapple
  • 本文由 发表于 2023年4月10日 20:51:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75977296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定