วันอังคารที่ 26 มีนาคม พ.ศ. 2567

การใช้ ToolTip ใน ChartJS

การเข้าถึงข้อมูลใน Tooltip :

การอ้างอิงถึง ในระดับต่างๆ เช่นระดับ dataset  ซึ่งจะเป็นชุดข้อมูล Array จะอ้างอิงถึงชุดข้อมูลด้วยตัวชี้

tooltipItem.datasetIndex  ส่วนการเข้าถึง Element ใน Array ตะต้องใช้ตัวชี้ tooltipItem.dataIndex


ตัวอย่าง :

 options: {

plugins: { tooltip: { callbacks: { label: function(tooltipItem, data) { // Access the tooltip item index var datasetIndex = tooltipItem.datasetIndex; // Access the index of the hovered element within the dataset var index = tooltipItem.dataIndex; // Access the dataset var dataset = data.datasets[datasetIndex]; // Access the data value at the specified index var dataValue = dataset.data[index]; // Do something with the data value return dataValue; } } } } }

วันพุธที่ 6 มีนาคม พ.ศ. 2567

การใช้ JSON.stringify แล้วมี Error "

 ตัวอย่างการใช้งานแบบปกติทั่วไป

                    code




                   output

ปัญหา

กรณีใช้ร่วมกับ EJS templates  มักมีปัญหา โดยเฉพาะการ Encode string. เช่น

ค่าของตัวแปร ที่กำหนดใน xx.js   แล้วส่งให้หน้า yy.ejs  ผ่านทาง  res.render (labels,data)




                                            code ใน yy.ejs



                                            ในหน้า client debug. จะขึ้น error นี้

                                                                                           
 code ในหน้า debug.


     ดูชัดๆ  แทนที่จะได้เครื่องหมาย "  แต่จะได้เป็น " แทน
                        
                                            
     ส่วนค่าตัวแปร data ที่เป็น ตัวเลข ไม่ error แต่ error เฉพาะตัวแปร labels    


วิธีแก้ไข 

     ให้แก้ไข จาก <%=    %>    เป็น <%-   %>    แบบนี้







                               

แค่นี้ก็ใช้ได้แล้วครับ  :)