4

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

問題

スライスでマウス移動イベントが発生すると、2 つの異なるブラウザーで 2 つの異なるエラーが発生します。

クローム : -

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

モジラ :-

q._xaxis._ticks[0] is undefined

もう 1 つの問題は、highlightMouseDown: true動作中 (アラートを表示) を使用highlightMouseOver: trueしたときですが、動作していないときです。

コードで何が間違っていますか? 私を助けてください。

更新: 2013 年 1 月 22 日

BarGraph で機能するハイライターの動作が必要です。与えられたコードで使用alert()しましたが、そのコードはハイライターのテスト専用です。

4

2 に答える 2

10

発生している両方のエラーは、同じ問題を指しています。この行jqplot.highlighter.min.jsは次のとおりです。

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

が定義されていないため、Chrome はformatterプロパティにアクセスできません (Firefox で報告されています)。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とtooltipLocationプロパティが必要になる可能性が高いことに注意してください。alert

編集：

このページにあるような強調表示を意味していると思います: 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 に答える