4

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

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()在给定的代码中使用过，但该代码仅用于测试 highliter。

4

2 回答 2

10

您遇到的两个错误都指的是同一个问题。这一行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未定义的错误。

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

编辑：

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

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

highlighter: {
    showTooltip: true,
    tooltipFade: true
}

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

于 2013-01-18T10:28:50.620 回答
0

以前的答案对我不起作用：事实证明，如果包含jqplot.cursor它会破坏饼图。

要让它再次工作，你需要有光标：

{ show: false }

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

于 2016-03-09T14:48:14.407 回答