Narzędzie do formatowania podpowiedzi Highcharts

Question

Dla this.x uzyskuję położenie indeksu po wprowadzeniu danych za pośrednictwem kodu. Jeśli zapełniam dane osobno, np. Poniższy kod, to this.x zwraca właściwy element. Jak mogę rozwiązać ten problem?

Works

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
}] 

położenie indeksu jest uzyskiwanie wypchnięty na this.x tutaj

var points = [{ 
    Name: 'good', 
    Y: '15000' 
}, { 
    Name: 'baad', 
    Y: '3000' 
}, { 
    Name: 'wow', 
    Y: '2000' 
}]; 

var chartData = { 
    GetChartSeries: function (points, name) { 

     var seriesData = []; 
     if (points != null && points != 'undefined') { 
      for (i=0; i<points.length; i++) { 
       seriesData.push({ 
        name: ""+points[i].Name, 
        y: parseFloat(points[i].Y) 
        //,color: '' 
       }); 
      } 
     } 
     return seriesData; 
    } 
}; 


$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      margin: [ 50, 50, 100, 80], 
      borderColor: '#A4A4A4', 
      borderRadius: 5, 
      borderWidth: 2 
     }, 
     legend: { 
      enabled: false 
     }, 
     title: { 
      text: 'Graduation Year Breakdown' 
     }, 
     colors: ['#790000'], 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       /* 
       dataLabels: { 
        enabled: true, 
        color: 'red' 
       }, 
       */ 
       borderRadius: 3, 
       colorByPoint: true 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+ 
        'in year: '+ this.x; 
      } 
     }, 
     xAxis: { 
      categories: [], 
      labels: { 
       rotation: -45, 
       align: 'right', 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Number of Students' 
      } 
     }, 
     series: [{ 
      //name: 'Population', 
      data: chartData.GetChartSeries(points, ""),//[4000, 3400, 2000, 34000, 120000],     
      dataLabels: { 
       enabled: true, 
       //rotation: -90, 
       color: '#4F4F4F', 
       align: 'center',//'right', 
       //x: 4, 
       //y: 10, 
       style: { 
        fontSize: '12px', 
        //fontWeight: 'bold', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 

     }] 
    }); 
}); 

Answer 1

Choć jestem pewny, dlaczego rozwiązanie nie działa, mogę zaproponować alternatywne rozwiązanie.

Funkcja tooltip formatter ma dostęp do wielu różnych parametrów. Zamiast this.x, możesz użyć this.point.name.

Na przykład:

formatter: function() { 
    // If you want to see what is available in the formatter, you can 
    // examine the `this` variable. 
    //  console.log(this); 

    return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+ 
     'in year: '+ this.point.name; 
}