javascript - 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 block 中取出并将其放入选项 block 中:

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