我正在使用JQXWidgets创建部分饼图系列，如demo here中所示。
我正在尝试在演示图表上添加自定义工具提示。我为4个图表的每个对象添加了一个值，称为“值”，并为其指定了一个数字。现在如何在工具提示中显示值？
下面的代码显示该值的“未定义”：
var toolTipCustomFn2 = function (value, itemIndex, serieGroup, group, categoryValue, categoryAxis) {
//how would I add the value of the chart's dataSource's value?
return '<DIV style="text-align:left"><b>Value: '+ charts[itemIndex].value +'</b><br />';
};
这是我使用的其余代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title id='Description'>jqxChart Partial Pie Example</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataStatCounter =
[
{ Browser: 'Chrome', Share: 45.6, value:26 },
{ Browser: 'IE', Share: 24.6, value:46 } },
{ Browser: 'Firefox', Share: 20.4 , value:26 } },
{ Browser: 'Safari', Share: 5.1 , value:36 } },
{ Browser: 'Opera', Share: 1.3 , value:66 } },
{ Browser: 'Other', Share: 3.0 , value:76 } }
];
var dataW3CCounter =
[
{ Browser: 'Chrome', Share: 34.1 , value:26 } },
{ Browser: 'IE', Share: 20.3 , value:36 } },
{ Browser: 'Firefox', Share: 18.3 , value:25 } },
{ Browser: 'Safari', Share: 17.8 , value:16 }},
{ Browser: 'Opera', Share: 2.7 , value:42 } },
{ Browser: 'Other', Share: 6.8 , value:46 } }
];
var dataWikimedia =
[
{ Browser: 'Chrome', Share: 42.7 , value:78 } },
{ Browser: 'IE', Share: 18.0 , value:66 }},
{ Browser: 'Firefox', Share: 15.3 , value:29 }},
{ Browser: 'Safari', Share: 6.1 , value:96 } },
{ Browser: 'Opera', Share: 2.4 , value:27 }},
{ Browser: 'Other', Share: 15.6 , value:26 }}
];
var dataNetApplications =
[
{ Browser: 'Chrome', Share: 16.4 , value:27 }},
{ Browser: 'IE', Share: 55.2 , value:16 } },
{ Browser: 'Firefox', Share: 18.0 , value:26 }},
{ Browser: 'Safari', Share: 5.8 , value:24 } },
{ Browser: 'Opera', Share: 1.3 , value:56 }},
{ Browser: 'Other', Share: 3.4 , value:36 }}
];
var charts = [
{ title: 'Stat counter', label: 'Stat', dataSource: dataStatCounter },
{ title: 'W3C counter', label: 'W3C', dataSource: dataW3CCounter },
{ title: 'Wikimedia', label: 'Wikimedia', dataSource: dataWikimedia },
{ title: 'Net Applications', label: 'NetApp', dataSource: dataNetApplications }
];
for (var i = 0; i < charts.length; i++) {
var chartSettings = {
source: charts[i].dataSource,
title: '',
description: charts[i].title,
enableAnimations: false,
showLegend: true,
showBorderLine: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
colorScheme: 'scheme03',
seriesGroups: [
{
type: 'pie',
showLegend: true,
enableSeriesToggle: true,
toolTipFormatFunction: toolTipCustomFn2,
series:
[
{
dataField: 'Share',
displayText: 'Browser',
showLabels: true,
labelRadius: 160,
labelLinesEnabled: true,
labelLinesAngles: true,
labelsAutoRotate: false,
initialAngle: 0,
radius: 125,
minAngle: 0,
maxAngle: 180,
centerOffset: 0,
offsetY: 170,
formatFunction: function (value, itemIdx, serieIndex, groupIndex) {
if (isNaN(value))
return value;
return value + '%';
}
}
]
}
]
};
// select container and apply settings
var selector = '#chartContainer' + (i + 1);
$(selector).jqxChart(chartSettings);
} // for
});
</script>
</head>
<body class='default'>
<table>
<tr>
<td>
<div id='chartContainer1' style="width: 400px; height: 250px;">
</div>
</td>
<td>
<div id='chartContainer2' style="width: 400px; height: 250px;">
</div>
</td>
</tr>
<tr>
<td>
<div id='chartContainer3' style="width: 400px; height: 250px;">
</div>
</td>
<td>
<div id='chartContainer4' style="width: 400px; height: 250px;">
</div>
</td>
</tr>
</table>
</body>
</html>
任何帮助将不胜感激！先感谢您！如果不清楚，请告诉我，我们将很乐意回答您的问题！
最佳答案
在工具提示功能中使用closure访问数据源
// tooltip function is now return a function, not a html string.
var toolTipCustomFn2 = function(datasource) {
return function (value, itemIndex, serieGroup, group, categoryValue, categoryAxis) {
return '<DIV style="text-align:left"><b>Value: '+ datasource[itemIndex].value +'</b><br />';
}
};
调用该函数以获取工具提示函数
// pass datasource to function, and get function which has datasource as closure
toolTipFormatFunction: toolTipCustomFn2(charts[i].dataSource),
完整的源代码在这里。
http://jsfiddle.net/cqqwxtuz/1/