คำแนะนำเครื่องมือ jqplot บนแผนภูมิแท่ง

ฉันใช้ปลั๊กอิน jquery jqplot เพื่อพล็อตแผนภูมิแท่ง เมื่อโฮเวอร์ ฉันต้องการแสดงเครื่องหมายสำหรับแถบและค่าของมันบนคำแนะนำเครื่องมือ ฉันพยายามแล้ว

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
            }

แต่มันใช้งานไม่ได้ แถบจะสว่างขึ้นอย่างเห็นได้ชัด และมีจุดเล็กๆ อยู่ด้านบน (ซึ่งน่าจะหายไปจากตัวแสดงแผนภูมิเส้น) แต่ไม่มีคำแนะนำเครื่องมือเลย ใครรู้ว่าฉันสามารถทำเช่นนี้ได้อย่างไร? ผมจะมีแท่งหลายๆ อัน ดังนั้นแกน x จะเกะกะและเละเทะถ้าผมแสดงมันข้างล่างนี้เท่านั้น


javascript jquery charts graph jqplot
person butterywombat    schedule 03.02.2011    source แหล่งที่มา

คำตอบ (3)


arrow_upward
31
arrow_downward

ฉันอ่าน jqplot.highlighter.js และค้นหาคุณสมบัติที่ไม่มีเอกสาร: tooltipContentEditor ฉันใช้มันเพื่อปรับแต่งคำแนะนำเครื่องมือเพื่อแสดงป้ายกำกับแกน x

ใช้สิ่งนี้:

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
ถูกต้อง. นั่นคือสิ่งที่ฉันกำลังมองหา ขอบคุณ! - person Tomasz Rozmus; 23.08.2012
comment
โซลูชันทรัพย์สิน / โทรกลับที่ยอดเยี่ยม นั่นจะช่วยฉันได้มาก - person brunobord; 18.09.2012

arrow_upward
22
arrow_downward

ไม่เป็นไร ฉันใช้วิธีวงเวียนเพื่อสร้างคำแนะนำเครื่องมือของตัวเองผ่าน jquery

ฉันทิ้งการตั้งค่าปากกาเน้นข้อความไว้เหมือนอย่างที่เคยเป็นในคำถามของฉัน (แม้ว่าคุณอาจไม่ต้องการคำแนะนำเครื่องมือก็ตาม)

ในไฟล์ js ของฉันหลังจากตั้งค่าแผนภูมิแท่งแล้ว (หลัง $.jqplot('chart', ...) ฉันตั้งค่าการเชื่อมโยงเมาส์แบบเลื่อนตามตัวอย่างบางส่วนที่แสดง ฉันแก้ไขมันเช่นนี้:

 $('#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('');
        }
    );

คำอธิบาย: ticks_array ถูกกำหนดไว้ก่อนหน้านี้ โดยมีสตริงขีดแกน x data ของ jqplot มีข้อมูลปัจจุบันอยู่ใต้เมาส์ของคุณเป็นอาร์เรย์ประเภท [x-category-#, y-value] pointIndex มีแถบ # ที่ไฮไลต์อยู่ในปัจจุบัน โดยพื้นฐานแล้วเราจะใช้สิ่งนี้เพื่อรับสตริงติ๊ก

จากนั้น ฉันจัดสไตล์คำแนะนำเครื่องมือเพื่อให้ปรากฏใกล้กับตำแหน่งเคอร์เซอร์ของเมาส์ คุณอาจต้องลบออกจาก mouseX และ mouseY เล็กน้อยหาก div นี้อยู่ในคอนเทนเนอร์ตำแหน่งอื่น

จากนั้นคุณสามารถจัดรูปแบบ #chartpseudotooltip ใน css ของคุณได้ หากคุณต้องการสไตล์เริ่มต้น คุณสามารถเพิ่มมันไปที่ .jqplot-highlighter-tooltip ใน jqplot.css

หวังว่านี่จะเป็นประโยชน์กับผู้อื่น!

person butterywombat    schedule 03.02.2011
comment
คุณควรแบ่งปันสิ่งนั้นที่นี่เพื่อช่วยทุกคนที่มีปัญหาเดียวกัน - person jcolebrand; 04.02.2011
comment
@butterywombat: ตอนนี้ฉันมีปัญหาเช่นเดียวกับคุณ และฉันพยายามรวมโค้ดของคุณเข้ากับของฉัน และฉันไม่เห็นการเปลี่ยนแปลงใด ๆ ในคำแนะนำเครื่องมือ ฉันยังใหม่กับ jquery มากขอคำแนะนำหน่อยค่ะ โดยเฉพาะบน #mychartdiv และ #chartv ฉันจำเป็นต้องให้คำนิยามทั้งสองนี้หรือไม่? ขอบคุณมาก. :) - person Ianthe; 16.11.2011
comment
โอ้ ไม่ ฉันไม่ได้รับข้อความนั้น...ตอบกลับในอีกหนึ่งปีต่อมา ฉันคิดว่าฉันไม่ได้เปลี่ยน '#chartv' เป็น '#mychartdiv' เมื่อฉันวางโค้ดเพื่อสแต็กโอเวอร์โฟลว์ ฉันค่อนข้างแน่ใจว่า #chartv ควรจะพูดว่า #mychartdiv คุณจะใส่สิ่งเหล่านี้ลงในไฟล์ html ที่คุณต้องการให้พล็อตปรากฏ - person butterywombat; 16.01.2012

arrow_upward
2
arrow_downward

ฉันกำลังใช้เวอร์ชันของปลั๊กอินเน้นข้อความในลิงก์ต่อไปนี้:

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

พารามิเตอร์ที่ฉันใช้:

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',
}

พารามิเตอร์ใหม่ช่วยให้มั่นใจได้ถึงตำแหน่งคงที่ซึ่งคำแนะนำเครื่องมือจะปรากฏขึ้น ฉันชอบวางไว้ที่มุมซ้ายบนเพื่อหลีกเลี่ยงปัญหาในการปรับขนาด div ของคอนเทนเนอร์

person Wagner Dias    schedule 05.10.2012