Highcharts的highstock,在1.2.2版里关于提示气泡的格式化,我给它做了一下扩充,能显示百分比。
代码如下:tooltipFormatter: function (pointFormat) {
var point = this,
series = point.series,
seriesTooltipOptions = series.tooltipOptions,
match = pointFormat.match(/\{(series|point)\.[a-zA-Z]+\}/g),
dataSum = pointFormat.match(/\{(dataSum)\.[0-9]+\}/g),//dataSum 我自己添加的
splitter = /[{\.}]/,
obj,
key,
replacement,
repOptionKey,
parts,
prop,
ratio,//ratio我自己添加的
i,
cfg = { // docs: percentageDecimals, percentagePrefix, percentageSuffix, totalDecimals, totalPrefix, totalSuffix
y: 0, // 0: use 'value' for repOptionKey
open: 0,
high: 0,
low: 0,
close: 0,
percentage: 1, // 1: use the self name for repOptionKey
total: 1
}; // Backwards compatibility to y naming in early Highstock
seriesTooltipOptions.valuePrefix = seriesTooltipOptions.valuePrefix || seriesTooltipOptions.yPrefix;
seriesTooltipOptions.valueDecimals = seriesTooltipOptions.valueDecimals || seriesTooltipOptions.yDecimals;
seriesTooltipOptions.valueSuffix = seriesTooltipOptions.valueSuffix || seriesTooltipOptions.ySuffix; // loop over the variables defined on the form {series.name}, {point.y} etc
for (i in match) {
key = match[i];
if (isString(key) && key !== pointFormat) { // IE matches more than just the variables // Split it further into parts
parts = (' ' + key).split(splitter); // add empty string because IE and the rest handles it differently
obj = { 'point': point, 'series': series}[parts[1]];
/*原为prop = parts[2];下面是我改的*/
if (parts[2] === "ratio") {
ratio = parseFloat((" " + dataSum[0]).split(splitter)[2]);
prop = "y";
}
else {
prop = parts[2];
}
/*到这里*/ // Add some preformatting
if (obj === point && cfg.hasOwnProperty(prop)) {
repOptionKey = cfg[prop] ? prop : 'value';
replacement = (seriesTooltipOptions[repOptionKey + 'Prefix'] || '') +
numberFormat(point[prop], pick(seriesTooltipOptions[repOptionKey + 'Decimals'], -1)) +
(seriesTooltipOptions[repOptionKey + 'Suffix'] || ''); // Automatic replacement
} else {
replacement = obj[prop];
} /*我改的计算比例*/
if (ratio) {
pointFormat = pointFormat.replace(dataSum[0], "");
replacement = Math.round(parseFloat(replacement.replace(',', "")) * 100 / ratio * 10000) / 10000;
}
/*到这里*/ pointFormat = pointFormat.replace(key, replacement);
}
} return pointFormat;
},
现在升级到1.3版了,想修改一下呢,发现自己的水平不够,新的代码看不懂了。
不知道如何修改了T TtooltipFormatter: function (pointFormat) { // Insert options for valueDecimals, valuePrefix, and valueSuffix
var series = this.series,
seriesTooltipOptions = series.tooltipOptions,
valueDecimals = pick(seriesTooltipOptions.valueDecimals, ''),
valuePrefix = seriesTooltipOptions.valuePrefix || '',
valueSuffix = seriesTooltipOptions.valueSuffix || '';
// Loop over the point array map and replace unformatted values with sprintf formatting up
each(series.pointArrayMap || ['y'], function (key) {
key = '{point.' + key; // without the closing bracket
if (valuePrefix || valueSuffix) {
pointFormat = pointFormat.replace(key + '}', valuePrefix + key + '}' + valueSuffix);
}
pointFormat = pointFormat.replace(key + '}', key + ':,.' + valueDecimals + 'f}');
});
return format(pointFormat, {
point: this,
series: this.series
});
},新版本代码是简洁不少,但是我那个求百分比的,不知道怎么添加了。
求高手帮帮忙
代码如下:tooltipFormatter: function (pointFormat) {
var point = this,
series = point.series,
seriesTooltipOptions = series.tooltipOptions,
match = pointFormat.match(/\{(series|point)\.[a-zA-Z]+\}/g),
dataSum = pointFormat.match(/\{(dataSum)\.[0-9]+\}/g),//dataSum 我自己添加的
splitter = /[{\.}]/,
obj,
key,
replacement,
repOptionKey,
parts,
prop,
ratio,//ratio我自己添加的
i,
cfg = { // docs: percentageDecimals, percentagePrefix, percentageSuffix, totalDecimals, totalPrefix, totalSuffix
y: 0, // 0: use 'value' for repOptionKey
open: 0,
high: 0,
low: 0,
close: 0,
percentage: 1, // 1: use the self name for repOptionKey
total: 1
}; // Backwards compatibility to y naming in early Highstock
seriesTooltipOptions.valuePrefix = seriesTooltipOptions.valuePrefix || seriesTooltipOptions.yPrefix;
seriesTooltipOptions.valueDecimals = seriesTooltipOptions.valueDecimals || seriesTooltipOptions.yDecimals;
seriesTooltipOptions.valueSuffix = seriesTooltipOptions.valueSuffix || seriesTooltipOptions.ySuffix; // loop over the variables defined on the form {series.name}, {point.y} etc
for (i in match) {
key = match[i];
if (isString(key) && key !== pointFormat) { // IE matches more than just the variables // Split it further into parts
parts = (' ' + key).split(splitter); // add empty string because IE and the rest handles it differently
obj = { 'point': point, 'series': series}[parts[1]];
/*原为prop = parts[2];下面是我改的*/
if (parts[2] === "ratio") {
ratio = parseFloat((" " + dataSum[0]).split(splitter)[2]);
prop = "y";
}
else {
prop = parts[2];
}
/*到这里*/ // Add some preformatting
if (obj === point && cfg.hasOwnProperty(prop)) {
repOptionKey = cfg[prop] ? prop : 'value';
replacement = (seriesTooltipOptions[repOptionKey + 'Prefix'] || '') +
numberFormat(point[prop], pick(seriesTooltipOptions[repOptionKey + 'Decimals'], -1)) +
(seriesTooltipOptions[repOptionKey + 'Suffix'] || ''); // Automatic replacement
} else {
replacement = obj[prop];
} /*我改的计算比例*/
if (ratio) {
pointFormat = pointFormat.replace(dataSum[0], "");
replacement = Math.round(parseFloat(replacement.replace(',', "")) * 100 / ratio * 10000) / 10000;
}
/*到这里*/ pointFormat = pointFormat.replace(key, replacement);
}
} return pointFormat;
},
现在升级到1.3版了,想修改一下呢,发现自己的水平不够,新的代码看不懂了。
不知道如何修改了T TtooltipFormatter: function (pointFormat) { // Insert options for valueDecimals, valuePrefix, and valueSuffix
var series = this.series,
seriesTooltipOptions = series.tooltipOptions,
valueDecimals = pick(seriesTooltipOptions.valueDecimals, ''),
valuePrefix = seriesTooltipOptions.valuePrefix || '',
valueSuffix = seriesTooltipOptions.valueSuffix || '';
// Loop over the point array map and replace unformatted values with sprintf formatting up
each(series.pointArrayMap || ['y'], function (key) {
key = '{point.' + key; // without the closing bracket
if (valuePrefix || valueSuffix) {
pointFormat = pointFormat.replace(key + '}', valuePrefix + key + '}' + valueSuffix);
}
pointFormat = pointFormat.replace(key + '}', key + ':,.' + valueDecimals + 'f}');
});
return format(pointFormat, {
point: this,
series: this.series
});
},新版本代码是简洁不少,但是我那个求百分比的,不知道怎么添加了。
求高手帮帮忙
pointFormat:'<span style="color:{series.color}">{series.name}</span>:<b>{point.y}</b><br/><span style="color:{series.color}">占总数的比例 :</span> <b>{point.ratio}{dataSum.210070}%</b><br/>'红色部分是我添加的
感觉好厉害的样子,请教下LZ,highstock1.3.2在IE8下运行animation属性的效果无效怎么决解。