在PieChart中使用HIghlighter: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

Mozila: -

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中所述).

解决方案(受如何在jqplot饼图上显示工具提示的启发)是将以下代码添加到您的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为假.饼图没有轴,因此有关q._xaxis._ticks未定义的早期错误.

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

编辑:

我假设你的意思是在这个页面上找到的那种突出显示:http://www.jqplot.com/deploy/dist/examples/barTest.html

在highlighter您最后的配置中,您目前拥有:

highlighter: {
    showTooltip: true,
    tooltipFade: true
}

如果您只想要突出显示效果而没有工具提示,请设置showTooltip为false.然后删除绑定到jqplotDataHighlight事件的代码行.这应该确保突出显示效果会显示出来.