ここのデモに示すように、JQXWidgets を使用して Partial Pie Series を作成しています。カスタム ツールチップをデモ チャートに追加しようとしています。「値」と呼ばれる 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>
どんな助けでも大歓迎です！前もって感謝します！不明な点がありましたらお知らせください。喜んでご質問にお答えいたします。