jqPlot饼图荧光笔

Question

I try to use jqPlot in my jsp project. I need to draw pie chart. With pie chart everything is ok, it works fine.

Then I want to show tooltip with some data when cursor is over the slice. For these, I can use highlighter which is provide by jqPlot, but I don't know how to do this.

In .jsp file I include <script language="JavaScript"src="../../common/jsc/plugins/jqplot.highlighter.min.js"></script>

My javascript code:

 $(document).ready(function(){ var url = 'supplyCalendarDayDetailsCharts.jsp?date=' + getEl('date').value + '&action=COG'; $.ajax({ url: url, type: "GET", dataType: "json", success: function(data) { var dataTmp = []; for (var i in data) { var dataPush = [data[i].cp_code, parseInt(data[i].value)]; dataTmp.push(dataPush); } var plot1 = jQuery.jqplot('chartdiv', [dataTmp], { seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. dataLabels: 'value', showDataLabels: true } } } ); } }); }); 

With AJAX I get json like this: [{"code":"CODE01","value":"1"},{"code":"CODE02","value":"3"}]

In pie chart I want to show value and when mouse is over slice I want to show code in tooltip.

Where shoud I use highlighter event? I tried in seriesDefaults body - after rendererOptions but maybe I use wrong options...

Please help me, and sorry for my english. Regards Łukasz

Answer 1

You need to add plug-ins:

<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>

You need to add settings:

cursor: {
    style: 'pointer',     // A CSS spec for the cursor type to change the
                            // cursor to when over plot.
    show: true,
    showTooltip: false,      // show a tooltip showing cursor position.
},


highlighter: {
  show: true,
  useAxesFormatters: false,
  tooltipLocation:'n',
  tooltipSeparator:', ',
  tooltipFormatString: '%s%d',
  fadeTooltip:'fast',
}