图例中的jqplot链接

Question

I have a basic pie chart made with 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' }
    }
  );
});

Now I want to add links in the legend. Is that possible and if so how?

Answer 1

You can put HTML in labels:

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

(or put the equivalent in the legend section of the jqPlot configuration object).

However, you might need to adjust the z-index of the legend before they are clickable:

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

Also, I noticed some settings (like enabling zoom) block the clickability of the labels.

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.

This is the string which I used to form the array.

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'
                }
            });