Question

我正在调整Highcharts饼图演示，以便在单击饼图切片后（MouseClick进行独占选择或Shift-MouseClick进行多选），单独的span元素显示逗号分隔的字符串所选饼图的名称。

span元素在MouseClick发生时成功显示单击的饼图切片的值。但是，在执行Shift-MouseClick选择多个切片时，span仅显示最近选择的饼图切片而不是选择集。

events: {
    select: function () {
    $("#chosenProgram").text(this.options.name);
    }
}

我发现有许多论坛答案建议使用getSelectedPoints()，但示例（例如找到的here）似乎是在折线图而非饼图的上下文中完成的。我尝试了那些例子中的代码，最好得到''，'[object Object]'或'[object Object]，[object Object]'作为回应。

events: {
    select: function () {
        // -- Attempt to get multiple-select to work
        var chart = $('#container').highcharts();
        var selectedPointsStr = "";                                    
        var selectedPoints = chart.getSelectedPoints();
        $.each(selectedPoints, function (i, value) {
            selectedPointsStr += "<br>" + value.category;
        });

        // I'm not getting the name of the seelcted pie slices
        // AND, it seems to be "before-click" instead of "after-click"
        alert(selectedPoints);
    }
}

我希望看到的是 - 作为示例：作为切片选择的结果的“选项A”或“选项A，选项C”，或者如果没有选择选项则默认为“未过滤”。怎么用饼图来完成呢？

此处参考是我正在处理的当前HTML。查找series > point > events以查看相关代码。（另一方面，有没有办法突出显示代码块的相关部分？）。

<h2>Modular View</h2>

<div id="selectedInfo">
    <h3>Selected Program type: <span id="chosenProgram" style="text-decoration:underline">Unfiltered</span></h3>
</div>

<h3>Instructions:</h3>
<ul>
    <li><code>MouseClick</code> to exclusively select only one slice.</li>
    <li><code>Shift+MouseClick</code> to select or deselect multiple slices.</li>
</ul>

<div id="container" style="min-width: 310px; height: 400px; max-width: 500px; margin: 0 auto; border:thin solid black"></div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/HighCharts/highcharts.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                var chartName = 'Program Type';
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: chartName
                    },
                    tooltip: { enabled: false },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        name: chartName,
                        colorByPoint: true,
                        point: {
                            events: {
                                select: function () {
                                    // This works for single-slice selection
                                    //var chart = $("#container").highcharts();                                    
                                    //$("#chosenProgram").text(this.options.name);

                                    // -- Attempt to get multiple-select to work
                                    var chart = $('#container').highcharts();
                                    var selectedPointsStr = "";                                    
                                    var selectedPoints = chart.getSelectedPoints();
                                    $.each(selectedPoints, function (i, value) {
                                        selectedPointsStr += "<br>" + value.category;
                                    });

                                    // I'm not getting the name of the seelcted pie slices
                                    // AND, it seems to be "before-click" instead of "after-click"
                                    alert(selectedPoints);
                                }
                            }
                        },
                        data: [{ name: 'Option A', y: 33 },
                            { name: 'Option B', y: 33 },
                            { name: 'Option C', y: 33 }]
                    }]
                });
            });
        });
    </script>
}

Answer 1

根据我能够收集的内容，我可以使用与Highcharts功能本身分开的按钮单击（或链接点击）来阅读所选内容。

因此，如果客户可以接受使用单独按钮阅读饼图选择，这就是答案。

如果你的客户像我一样说，“那太好了，但你不能没有按钮吗？[即多选]”这还不是答案。我还没有看到任何成功的例子。

在关注“点击时更新选择摘要”行为时，要记住一个重要的微妙之处。有些用户喜欢玩选择（点击随机切片，选择和取消选择切片等），就像他们试图成为beta测试者一样。我还没有看到任何现有的代码示例正确保持选择摘要与用户实际点击的内容同步。虽然有些人可能会回答，“你需要更好地培训你的用户，”我的反应是我无法控制我的用户，但我可以控制我提供的内容，所以我不会从用户那里得到错误的错误报告

以下代码的一个好处是用户可以随心所欲：当他们点击按钮时，代码将读取点击按钮时选择的内容。

<h2>Modular View</h2>

<div id="selectedInfo">
    <h3>Selected Program type: <span id="chosenProgram" style="text-decoration:underline">Unfiltered</span></h3>
</div>

<h3>Instructions:</h3>
<ul>
    <li><code>MouseClick</code> to exclusively select only one slice.</li>
    <li><code>Shift+MouseClick</code> to select or deselect multiple slices.</li>
</ul>

<div id="container" style="min-width: 310px; height: 400px; max-width: 500px; margin: 0 auto; border:thin solid black"></div>

<p><button id="ReadSelections">Read Selections</button></p>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/HighCharts/highcharts.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Read selected pie slices in chart(s)
            $("#ReadSelections").click(function () {
                var x = "";
                var chart = $('#container').highcharts();
                var selectedPoints = chart.getSelectedPoints();
                var i = 0;
                $.each(selectedPoints, function (i, value) {
                    if (i == 0) {
                        x = value.name;
                    }
                    else {
                        x += ", "+value.name;
                    }
                    i++;
                });

                    if(x!=="")
                        $("#chosenProgram").text(x);
                else
                        $("#chosenProgram").text("None selected");
            });

            // Generate Pie Chart
            $(function () {
                var chartName = 'Program Type';
                $('#container').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: chartName
                    },
                    tooltip: { enabled: false },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        name: chartName,
                        colorByPoint: true,
                        data: [{ name: 'Option A', y: 33 },
                            { name: 'Option B', y: 33 },
                            { name: 'Option C', y: 33 }]
                    }]
                });
            });
        });
    </script>
}

如何使用Highcharts getSelectedPoints获取逗号分隔的选定饼图片串

1 个答案: