jqPlot Pie Chart highlighter

Question

Я пытаюсь использовать jqPlot в моем проекте jsp. Мне нужно рисовать круговую диаграмму. С круговой диаграммой все в порядке, оно отлично работает.

Затем я хочу показать подсказку с некоторыми данными, когда курсор находится над срезом. Для этого я могу использовать маркер, который предоставляется jqPlot, но я не знаю, как это сделать.

В .jsp файл включает <script language="JavaScript"src="../../common/jsc/plugins/jqplot.highlighter.min.js"></script>

Моего Javascript код:

$(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 
 
       } 
 
      } 
 
      } 
 
     ); 
 
    } 
 
    }); 
 
});

С помощью AJAX Я получаю JSON как это: [{ "кода": "CODE01 "," значение ":" 1 "}, {" код ":" CODE02 "," значение ":" 3 "}]

В круговой диаграмме я хочу показать значение, а когда мышь над срезом, я хочу показать код в подсказке.

Где shoud Я использую событие подсветки? Я попытался в серииDefaults body - после rendererOptions, но, возможно, я использую неправильные варианты ...

Пожалуйста, помогите мне, и извините за мой английский. С уважением Лукаш

Answer 1

Вам нужно добавить плагины:

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

Вам необходимо добавить параметры:

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', 
}