0

我正在使用 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>

任何帮助将不胜感激！先感谢您！如果我不清楚，请告诉我，我很乐意回答您的问题！

4

1 回答 1

3

在工具提示函数中使用闭包访问数据源

// 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/

于 2015-01-25T05:42:31.417 回答