3

这是到目前为止的故事。

  1. 我已经使饼图切片可点击，因此用户可以单击以转到列出与该切片相关的项目的不同页面。

  2. 对于非常小的切片，用户很难单击它们。因此，我希望饼图旁边的图例具有相同的功能 - 单击图例项，转到 URL。

  3. 似乎没有任何方法可以点击图例。我正在寻找类似 jqplotLegendClick 的东西。我可以使用 HTML A 元素作为图例文本，这将是一个可接受的解决方案，但是当我单击它时没有任何反应！

知道如何处理吗？我原以为这是一个很常见的场景。

这是一个最小的 jsfiddle，显示下面建议的解决方案不起作用，以防有人发现问题。http://jsfiddle.net/Ep4sP/这是js部分。

$(function ()
{

    var data = [['2012-09-13', 1], ['2012-10-22', 2], ['2012-01-12', 3]];

    $.jqplot('ChartDIV', [data],
    {
        seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer
        },
        legend: { show: true }
    });

    $('.jqplot-table-legend-label').each(function(){
        $(this).click(function(){
            alert('you have clicked on the serie : ' + $(this).html());
        });
    });

});
4

1 回答 1

2

您可以在图表初始化后添加以下代码：http: //jsfiddle.net/WdLnm/272/

$('.jqplot-table-legend-label').each(function(){
    $(this).click(function(){
        alert('you have clicked on the serie : ' + $(this).html());
    });
});

请注意，在最近的版本中，类名是.jqplot-table-legend（用 1.0.8 测试）

于 2012-11-15T08:04:20.037 回答