javascript - 饼图使用荧光笔 : jQplot

Question

我想在饼图中使用荧光笔功能。我的代码是

function device_ownership_graph(titleOfGraph, corporateOwned,
        corporateShared, employeeOwned) {

    var arrCorporateOwned = [ 'Corporate-Owned', corporateOwned ];
    var arrCorporateShared = [ 'Corporate-Shared', corporateShared ];
    var arrEmployeeOwned = [ 'Employee-Owned', employeeOwned ];

    $.jqplot.config.enablePlugins = true;
    /*Here we construct graph*/
    $.jqplot('device_ownership_graph', [ [ arrCorporateOwned, arrCorporateShared, arrEmployeeOwned ] ], {
        title : {
            text : titleOfGraph, // title for the plot,
            show : true,
            fontSize : 14,
            textColor : '#808080',
            textAlign : 'center'
        },
        seriesColors : [ "#00b0f0", "#ffc000", "#92d050"],
        seriesDefaults : {
            // Make this a pie chart.
            renderer : jQuery.jqplot.PieRenderer,
            shadow: false,
            rendererOptions : {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                showDataLabels : true,
                startAngle: 90,
                sliceMargin: 1,
                //highlightMouseOver: true
                highlightMouseDown: true

            }
        },
        legend : {
            renderer : $.jqplot.PieLegendRenderer,
            show : true,
            rendererOptions : {
                numberRows : 1,
                numberColumns : 3,
                disableIEFading : false
            },
            location : 'n',
            placement : 'outsideGrid',
            marginTop : '0px',
            marginBottom : '0px'
        },
        grid : {
            drawGridlines: false,
            show : true,
            background : 'transparent',
            borderWidth : 1,
            shadow : false
        },
        highlighter: {
            showTooltip: true,
            tooltipFade: true
        }

    });
    $('#device_ownership_graph .jqplot-data-label').css('color', '#000000');

    $('#device_ownership_graph').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);}); 
}

问题

当切片上的鼠标移动事件时，我在两个不同的浏览器中收到两个不同的错误。

Chrome :-

Uncaught TypeError: Cannot read property 'formatter' of undefined jqplot.highlighter.min.js:57

莫兹拉:-

q._xaxis._ticks[0] is undefined

还有一个问题，当我使用 highlightMouseDown: true 时它可以工作(显示警报)但是当我使用 highlightMouseOver: true 时它不工作。

我的代码哪里做错了？请帮助我。

---

更新:2013 年 1 月 22 日

---

我想要荧光笔在 BarGraph 中的行为。我在给定的代码中使用了 alert()，但该代码仅用于测试 highliter。

Answer 1

您收到的两个错误都指的是同一个问题。 jqplot.highlighter.min.js 中的这一行是:

var w=q._xaxis._ticks[0].formatter;

Chrome 无法访问 formatter 属性，因为 q._xaxis._ticks 未定义(如 Firefox 中所报告)。

解决方案(受 How to display tooltips on jqplot pie chart 启发)是将以下代码添加到您的 seriesDefaults 配置中:

highlighter: {
    show: true,
    formatString:'%s', 
    tooltipLocation:'sw', 
    useAxesFormatters:false
}

在您的情况下，seriesDefaults 将如下所示:

seriesDefaults:{
    // Make this a pie chart.
    renderer : jQuery.jqplot.PieRenderer,
    shadow: false,
    rendererOptions : {
        // Put data labels on the pie slices.
        // By default, labels show the percentage of the slice.
        showDataLabels : true,
        startAngle: 90,
        sliceMargin: 1,
        highlightMouseOver: true
        //highlightMouseDown: true
    },
    highlighter: {
        show: true,
        //formatString:'%s', 
        //tooltipLocation:'sw', 
        useAxesFormatters:false
    }
}

重要的是将 useAxesFormatters 设置为 false。饼图没有坐标轴，因此有关 q._xaxis._ticks 的早期错误未定义。

请注意，当您不再使用基于 alert 的工具提示时，您可能需要注释掉的 formatString 和 tooltipLocation 属性。

编辑:

我假设您指的是此页面上的那种突出显示:http://www.jqplot.com/deploy/dist/examples/barTest.html

在最后一个 highlighter 配置中，您当前拥有:

highlighter: {
    showTooltip: true,
    tooltipFade: true
}

如果您只想要突出显示效果而不需要工具提示，请将 showTooltip 设置为 false。然后删除绑定(bind)到 jqplotDataHighlight 事件的代码行。这应该确保突出显示效果。