Highcharts工具提示格式化程序 [英] Highcharts tooltip formatter

问题描述

对于 this.x ，我在通过代码推送数据时获取索引位置。如果我单独填充数据，如下面的代码，那么 this.x 返回正确的项目。如何解决这个问题？

有效

  xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'， '十月'，'十一月'，'十二月'] 
}，
 
系列：[{
数据：[29.9，71.5，106.4，129.2，144.0，176.0，135.6 ，148.5,216.4,194.1,95.6,54.4] 
}] 
  

索引 $ b $ p $ 此处 > var points = [{
名称：'good'，
Y：'15000'
}，{
名称：'baad'，
Y：'3000 '
}，{
名称：'wow'，
Y：'2000'
}];

var chartData = {
GetChartSeries：function（points，name）{

var seriesData = [];
if（points！= null&& points！='undefined'）{
for（i = 0; i seriesData.push（{
name：+ points [i] .Name，
y：parseFloat（points [i] .Y）
//，color：''
}）;
}
}
return seriesData;
}
};

$ b $（function（）{
$（'＃container'）。highcharts（{
chart：{
type：'column'，
margin：[50，50，100，80]，
borderColor：'＃A4A4A4'，
borderRadius：5，
borderWidth：2
}，
传说：{
启用：false
}，
标题：{
text：'毕业年份细分'
}，
颜色：[' ＃790000']，
图例：{
启用：false
}，
plotOptions：{
系列：{
/ *
dataLabels ：{
启用：true，
颜色：'red'
}，
* /
borderRadius：3，
colorByPoint：true
}
}，
tooltip：{
formatter：function（） {year ='+
'返回'< b>'+ Highcharts.numberFormat（this.y，0）+'< / b>< br />'+
'。 X;
}
}，
xAxis：{
categories：[]，
labels：{
rotation：-45，
align：' right'，
style：{
fontSize：'13px'，
fontFamily：'Verdana，sans-serif'
}
}
}，
yAxis：{
分钟：0，
标题：{
text：'学生人数
}
}，
系列：[ {
// name：'Population'，
data：chartData.GetChartSeries（points，），// [4000,3400,2000,34000,120000]，
dataLabels：{
启用：true，
//旋转：-90，
颜色：'＃4F4F4F'，
align：'center'，//'right'，
// x：4，
// y：10，
样式：{
fontSize：'12px'，
// fontWeight：'bold'，
fontFamily：'Verdana，sans-serif'
}
}

}]
}）;
}）;


解决方案

尽管我不确定您的解决方案为何不能解决问题，我可以提出一种替代方案。

工具提示格式器功能可以访问许多不同的参数。您可以使用 this.point.name 来代替 this.x 。

例如：

  formatter：function（）{
 //如果您想查看格式化程序中有什么可用的，你可以
 //检查`this`变量。 
 // console.log（this）; 
 
年度返回'< b>'+ Highcharts.numberFormat（this.y，0）+'< / b>< br />'+ 
'：' + this.point.name; 
} 
  

For this.x, I am getting the index location when I push the data in via code. If I populate the data separately, like the following code, then this.x returns the right item. How can I fix this issue?

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

Index location is getting pushed out for this.x here

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

        }]
    });
});

解决方案

While I am uncertain as to why your solution doesn't work, I can propose an alternative solution.

The tooltip formatter function has access to a number of different parameters. Instead of this.x, you could use this.point.name.

For example:

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

这篇关于Highcharts工具提示格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！