jqPlot Круговые диаграммы Подсказки не отображаются

Question

Мои круговые диаграммы отображаются правильно, однако всплывающие подсказки не появляются при наведении курсора на срезы при попытке использовать плагин подсветки для всплывающих подсказок. Пожалуйста, взгляните на параметры, которые я настраиваю, и дайте мне знать, если мне не хватает чего-то очевидного, спасибо.

Я включил следующие соответствующие JS файлы:

• jquery.min.js
• jquery.jqplot.min.js
• jqplot.pieRenderer.min.js
• jqplot. highlighter.min.js

Вот варианты я устанавливаю:

var options = { 
    seriesDefaults: { 
     seriesColors: ['#00809d', '#c22a33'], 
     renderer: jQuery.jqplot.PieRenderer, 
     rendererOptions: { 
      showDataLabels: true, 
      dataLabels: 'label', 
      dataLabelPositionFactor: .45, 
      sliceMargin: 1, 
      drawBorder: false, 
      startAngle: -90, 
      highlightMouseOver: true 
     }, 
     highlighter: { 
      show: true, 
      showTooltip: true, 
      formatString:'%s', 
      tooltipLocation: 'ne', 
      useAxesFormatters: false 
     }, 
     shadow: false 
    }, 
    legend: { show:false }, 
    grid: { 
     drawGridlines: false, 
     borderColor: 'transparent', 
     shadow: false, 
     drawBorder: false, 
     shadowColor: 'transparent', 
     background: 'transparent' 
    } 
}; 

Answer 1

Единственный плохой рендеринг, который я вижу, - это тот, который касается визуальных проблем из-за рендеринга этикеток. Этикетки слишком длинны, чтобы вписаться в круговую диаграмму. Попробуйте прокомментировать строку dataLabels: 'label' ', чтобы увидеть, хорошо ли рендеринг.

Для того, чтобы отобразить всплывающие подсказки при наведении курсора на ломтики, вы должны принять подсвеченную часть из блока seriesDefaults и поставить его в блоке опций:

var options = { 
    seriesDefaults: { 
    //the 'seriesDefaults' options without the 'highlighter' part 
    }, 
    highlighter: { 
    show: true, 
    showTooltip: true, 
    formatString:'%s', 
    tooltipLocation: 'ne', 
    useAxesFormatters: false 
    }, 
    legend: { show:false }, 
    grid: { /* the 'grid' options } 
}; 

Пожалуйста, см рабочего примера here