javascript - 图例中的jqplot链接

Question

我有一个用 jqplot 制作的基本饼图：

$(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [data],
    {
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});

现在我想在图例中添加链接。这可能吗？如果可以，怎么办？

Answer 1

您可以将 HTML 放入标签中：

$.jqplot(..., {
  series : {
    ...
    label : "<a href='URL'>click me</a>"
  }
});

（或将等效项放在legendjqPlot 配置对象的部分中）。

但是，您可能需要调整图例的 z-index 才能点击它们：

.jqplot-table-legend { z-index: 1000 }

此外，我注意到一些设置（如启用缩放）阻止了标签的可点击性。

Answer 2

//I used the below method to bring hyperlink on legends, it worked for me. I did the same thing for bar chart also.

这是我用来形成数组的字符串。

strArr = "[<' a onclick = GoToSearch("100") href=# > NY </a> ' , 8561 ]"

arrOwner= eval("[" + strArr + "]")

  $.jqplot.config.enablePlugins = false;

                plotCAP_EquipCount1 = $.jqplot('piechartOwner', [arrOwner], {
                    grid: {
                        drawBorder: true,
                        drawGridlines: false,
                        background: '#ffffff',
                        shadow: false
                    },
                    axesDefaults: {
                },
                title: 'Ownership Data',
                seriesDefaults: {
                    renderer: $.jqplot.PieRenderer,
                    rendererOptions: {
                        showDataLabels: true,
                        sliceMargin: 1,
                        startAngle: -90,
                        dataLabels: 'value',
                        highlightMouseOver: true,
                        highlightMouseDown: true
                    }
                },
                legend: {
                    show: true,
                    placement: 'outsideGrid',
                    rendererOptions: {
                        numberRows: 10
                    },
                    location: 'ne'
                }
            });