技术问题咨询：Highcharts Tooltip格式化函数无法获取this.x值，以及Angular 12中使用格式化函数时出现Property 'value' does not exist on type 'ChartService'.ts(2339)错误的解决方法

Hey there, let's break down your two issues with clear fixes that I've tested in similar scenarios:

The main culprit here is almost always incorrect context binding or misunderstanding how Highcharts passes data to the formatter function. Here's how to fix it:

Fixes: #

• Use a regular function instead of an arrow function: Arrow functions capture the outer this (like your component or service context) instead of the Highcharts tooltip context. A regular function will have this bound to the tooltip's data object, which includes this.x, this.y, and this.points (for multi-series charts):

  tooltip: {
    formatter: function() {
      // This works! `this` refers to the tooltip context
      return `<strong>X Value:</strong> ${this.x}<br/><strong>Y Value:</strong> ${this.y}`;
    }
  }
  

• If you need access to your component's context + Highcharts data: Use the formatter's built-in parameter (Highcharts passes the tooltip context as the first argument) with an arrow function:

  tooltip: {
    formatter: (tooltipContext) => {
      // `tooltipContext` has all the same data as `this` in the regular function
      // And `this` here refers to your component/service
      return `<strong>X:</strong> ${tooltipContext.x}<br/><strong>Component Value:</strong> ${this.yourComponentProperty}`;
    }
  }
  

• Note for non-linear series (like Pie): Charts without an X-axis won't have this.x — use this.point.name instead to get the category label.

This error pops up when TypeScript can't resolve the this context you're trying to access in the formatter. Here's what's happening and how to fix it:

What's going wrong: #

When you define the formatter as a regular function inside your ChartService or component, Highcharts binds this to its own tooltip context — but TypeScript is still expecting this to refer to your ChartService instance. So when you try to access this.value, TypeScript throws an error because ChartService doesn't have that property (or you meant to access a component property instead).

Fixes: #

1. Capture your component/service context explicitly:
   Define a variable at the top of your component/service to hold the correct this, then reference it inside the formatter:

   import { Component } from '@angular/core';
   import * as Highcharts from 'highcharts';
   
   @Component({ /* ... */ })
   export class YourChartComponent {
     // Capture the component's `this`
     private readonly self = this;
     public chartOptions: Highcharts.Options = {
       tooltip: {
         formatter: function() {
           // Use `self` to access your component's properties
           return `<strong>X:</strong> ${this.x}<br/><strong>My Value:</strong> ${this.self.value}`;
         }
       },
       // Other chart config...
     };
     // Your component property TypeScript recognizes
     public value = 42;
   }
   

2. Use an arrow function + Highcharts context parameter:
   Arrow functions preserve the outer this (your component/service), and you can use the formatter's parameter to get Highcharts tooltip data:

   chartOptions: Highcharts.Options = {
     tooltip: {
       formatter: (tooltipContext) => {
         // `this` is now your component/service, so TypeScript recognizes `this.value`
         return `<strong>X:</strong> ${tooltipContext.x}<br/><strong>My Value:</strong> ${this.value}`;
       }
     }
   };
   

3. Type assertion for strict TypeScript setups:
   If you need to stick with a regular function, use a type assertion to tell TypeScript exactly what this refers to:

   formatter: function(this: Highcharts.TooltipFormatterContextObject & { self: YourChartComponent }) {
     return `<strong>X:</strong> ${this.x}<br/><strong>My Value:</strong> ${this.self.value}`;
   }
   

内容的提问来源于stack exchange，提问作者Riyas Ahamed