web-dev-qa-db-fra.com

Formateur d'infobulles Highcharts

Pour this.x, J'obtiens l'emplacement de l'index lorsque j'insère les données via le code. Si je remplis les données séparément, comme le code suivant, alors this.x renvoie le bon article. Comment puis-je résoudre ce problème?

Fonctionne

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]        
}]

L'emplacement de l'index est repoussé pour this.x ici

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'
                }
            }

        }]
    });
});
highchartstooltip
11
learning...

Bien que je ne sache pas pourquoi votre solution ne fonctionne pas, je peux proposer une solution alternative.

La fonction formateur d'info-bulles a accès à un certain nombre de paramètres différents. Au lieu de this.x, vous pouvez utiliser this.point.name.

Par exemple:

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;
}
42
NT3RP