在PieChart中使用HIghlighter:jQplot

时间:2013-01-17 08:03:43

标签: javascript graph jqplot pie-chart

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

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。

1 个答案:

答案 0 :(得分:0)

之前的答案对我不起作用:事实证明,如果你加入jqplot.cursor,它将打破饼图。

要让它再次起作用,你需要有光标:

{ show: false }

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