HIghlighter在PieChart : jQplot中的应用

Question

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

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

问题

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

铬：-

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()，但该代码仅用于高公升的测试。

Answer 1

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

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

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

解决方案(受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未定义的错误。

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

编辑：

我假设您指的是该页面中的突出显示类型：http://www.jqplot.com/deploy/dist/examples/barTest.html

在最近的highlighter配置中，您目前拥有：

highlighter: {
    showTooltip: true,
    tooltipFade: true
}

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

Answer 2

前面的答案不适用于我:原来，如果包括jqplot.cursor，它将打破饼图。

要使它再次工作，需要有游标：

{ show: false }

作为饼图的一部分，seriesDefaults选项。