tooltip jqplot pada diagram batang

Saya menggunakan plugin jquery jqplot untuk merencanakan beberapa diagram batang. saat mengarahkan kursor, saya ingin menampilkan tanda centang untuk bilah dan nilainya pada tooltip. Saya sudah mencoba

highlighter: { show: true, 
            showTooltip: true,      // show a tooltip with data point values.
            tooltipLocation: 'nw',  // location of tooltip: n, ne, e, se, s, sw, w, nw.
            tooltipAxes: 'both',    // which axis values to display in the tooltip, x, y or both.
            lineWidthAdjust: 2.5   // pixels to add to the size line stroking the data point marker
            }

tapi itu tidak berhasil. bilah secara visual menjadi lebih terang, dan ada titik kecil di bagian atas (yang idealnya akan hilang--mungkin dari hal-hal penyaji diagram garis), tetapi tidak ada keterangan alat di mana pun. Adakah yang tahu bagaimana saya bisa melakukan ini? Saya akan memiliki banyak batang sehingga sumbu x akan berantakan dan berantakan jika saya menampilkannya di sana saja.


javascript jquery charts graph jqplot
person butterywombat    schedule 03.02.2011    source sumber

Jawaban (3)


arrow_upward
31
arrow_downward

Saya membuka jqplot.highlighter.js dan menemukan properti tidak berdokumen: tooltipContentEditor. Saya menggunakannya untuk menyesuaikan tooltip untuk menampilkan label sumbu x.

Gunakan sesuatu seperti ini:

highlighter:{
        show:true,
        tooltipContentEditor:tooltipContentEditor
    },

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label, x-axis_tick, y-axis value
    return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
person duckegg    schedule 26.07.2012
comment
Benar. Itulah yang saya cari. Terima kasih! - person Tomasz Rozmus; 23.08.2012
comment
solusi properti/panggilan balik yang hebat. Itu akan banyak membantu saya. - person brunobord; 18.09.2012

arrow_upward
22
arrow_downward

sudahlah, saya melakukan cara memutar untuk membuat tooltip sendiri melalui jquery.

Saya membiarkan pengaturan stabilo seperti pada pertanyaan saya (walaupun Anda mungkin tidak memerlukan tooltip).

Dalam file js saya setelah diagram batang diatur (setelah $.jqplot('chart', ...) saya mengatur pengikatan hover mouse, seperti yang ditunjukkan beberapa contoh. Saya memodifikasinya seperti ini:

 $('#mychartdiv').bind('jqplotDataHighlight', 
        function (ev, seriesIndex, pointIndex, data ) {
            var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip
            var mouseY = ev.pageY;
            $('#chartpseudotooltip').html(ticks_array[pointIndex] + ', ' + data[1]);
            var cssObj = {
                  'position' : 'absolute',
                  'font-weight' : 'bold',
                  'left' : mouseX + 'px', //usually needs more offset here
                  'top' : mouseY + 'px'
                };
            $('#chartpseudotooltip').css(cssObj);
            }
    );    

    $('#chartv').bind('jqplotDataUnhighlight', 
        function (ev) {
            $('#chartpseudotooltip').html('');
        }
    );

Penjelasan: ticks_array telah didefinisikan sebelumnya, berisi string centang sumbu x. data jqplot memiliki data saat ini di bawah mouse Anda sebagai array tipe [kategori-x-#, nilai-y]. pointIndex memiliki bilah yang disorot saat ini #. Pada dasarnya kita akan menggunakan ini untuk mendapatkan string centang.

Lalu saya menata tooltipnya agar tampak dekat dengan tempat kursor mouse berada. Anda mungkin perlu mengurangi sedikit dari mouseX dan mouseY jika div ini berada di wadah yang diposisikan lain.

Anda kemudian dapat menata #chartpseudotooltip di css Anda. Jika Anda menginginkan gaya default, Anda bisa menambahkannya ke .jqplot-highlighter-tooltip di jqplot.css.

semoga ini bermanfaat bagi orang lain!

person butterywombat    schedule 03.02.2011
comment
Anda harus benar-benar membagikannya di sini untuk membantu orang lain yang memiliki masalah yang sama - person jcolebrand; 04.02.2011
comment
@butterywombat: Saya memiliki masalah yang sama seperti Anda sekarang dan saya mencoba memasukkan kode Anda dengan kode saya dan saya tidak melihat perubahan apa pun pada tooltip. Saya benar-benar baru mengenal jquery, ingin meminta saran. terutama di #mychartdiv dan #chartv, apakah saya perlu mendefinisikan keduanya? Terima kasih banyak. :) - person Ianthe; 16.11.2011
comment
oh tidak, saya tidak menerima pesan itu...baiklah balasan setahun kemudian Saya rasa saya tidak mengubah '#chartv' menjadi '#mychartdiv' ketika saya menempelkan kode saya ke stack overflow. Jadi saya cukup yakin #chartv seharusnya mengatakan #mychartdiv. Anda akan meletakkannya di file html tempat Anda ingin plotnya muncul - person butterywombat; 16.01.2012

arrow_upward
2
arrow_downward

Saya menggunakan versi plugin highlighter pada link berikut:

https://github.com/tryolabs/jqplot-highlighter

Parameter yang saya gunakan:

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

Parameter baru memastikan lokasi tetap di mana tooltip akan muncul. Saya lebih suka meletakkannya di sudut kiri atas untuk menghindari masalah dengan mengubah ukuran div container.

person Wagner Dias    schedule 05.10.2012