Echarts圖表的數據顯示方法及裝置與流程
2024-02-24 04:04:15
本申請涉及圖表領域，具體而言，涉及一種Echarts圖表的數據顯示方法及裝置。
背景技術：
商業級數據圖表(Enterprise Charts，簡稱ECharts)，是一款基於HTML5 Canvas的企業級圖表庫，在使用Echarts圖表的過程中，經常會使用包含坐標軸的圖表來展示二維數據，如折線圖、柱狀圖等。在展示過程中坐標軸縱(橫)軸左(下)側會顯示每個刻度所標示的數據度(即，label)，為了能夠正確顯示label，在初始化圖表時通常會給坐標軸設定一定的寬度來實現。然而，在相關技術中，初始化Echarts圖表時，通常設定坐標軸縱軸的邊距為一個具體的數字，例如20像素，由於字符實際在canvas畫布中佔據的寬度無法得知，所以預先設定的固定寬度並不準確。因此，在數據長度過長時容易超出坐標軸的顯示範圍，導致部分數據被截斷顯示不完整。
針對相關技術中當Echarts圖表中數據長度過長時，容易導致數據顯示不完整的問題，目前尚未提出有效的解決方案。
技術實現要素：
本申請的主要目的在於提供一種Echarts圖表的數據顯示方法及裝置，以解決相關技術中當Echarts圖表中數據長度過長時，容易導致數據顯示不完整的問題。
為了實現上述目的，根據本申請的一個方面，提供了一種Echarts圖表的數據顯示方法。該方法包括：獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據；在待顯示數據中獲取字符長度最長的數據，得到目標數據；創建canvas畫布並在canvas畫布上繪製目標數據；計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度；以及根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據。
進一步地，計算目標寬度包括：確定繪製目標數據的像素點在canvas畫布上的起始位置；確定繪製目標數據的像素點在canvas畫布上的終止位置；以及根據起始位置和終止位置計算目標寬度。
進一步地，獲取待顯示數據包括：獲取在Echarts圖表的縱軸上需要進行顯示的數據，得到待顯示的縱軸數據，在待顯示數據中獲取字符長度最長的數據，得到目標數 據包括：在待顯示的縱軸數據中獲取字符長度最長的數據，得到縱軸目標數據，創建canvas畫布並在canvas畫布上繪製目標數據包括：創建canvas畫布並在canvas畫布繪製縱軸目標數據，計算目標寬度包括：計算縱軸目標數據在canvas畫布上所佔據的寬度，得到縱軸目標寬度，根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據包括：根據縱軸目標寬度調整Echarts圖表的縱軸邊距並在調整縱軸邊距後的Echarts圖表的縱軸上顯示待顯示的縱軸數據。
進一步地，獲取待顯示數據包括：獲取在Echarts圖表的橫軸上需要進行顯示的數據，得到待顯示的橫軸數據，在待顯示數據中獲取字符長度最長的數據，得到目標數據包括：在待顯示的橫軸數據中獲取字符長度最長的數據，得到橫軸目標數據，創建canvas畫布並在canvas畫布上繪製目標數據包括：創建canvas畫布並在canvas畫布繪製橫軸目標數據，計算目標寬度包括：計算橫軸目標數據在canvas畫布上所佔據的寬度，得到橫軸目標寬度，根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據包括：根據橫軸目標寬度調整Echarts圖表的橫軸邊距並在調整橫軸邊距後的Echarts圖表的橫軸上顯示待顯示的橫軸數據。
為了實現上述目的，根據本申請的另一方面，提供了一種Echarts圖表的數據顯示裝置。該裝置包括：第一獲取單元，用於獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據；第二獲取單元，用於在待顯示數據中獲取字符長度最長的數據，得到目標數據；繪製單元，用於創建canvas畫布並在canvas畫布上繪製目標數據；計算單元，用於計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度；以及第一顯示單元，用於根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據。
進一步地，計算單元包括：第一確定模塊，用於確定繪製目標數據的像素點在canvas畫布上的起始位置；第二確定模塊，用於確定繪製目標數據的像素點在canvas畫布上的終止位置；以及第一計算模塊，用於根據起始位置和終止位置計算目標寬度。
進一步地，第一獲取單元包括：第一獲取模塊，用於獲取在Echarts圖表的縱軸上需要進行顯示的數據，得到待顯示的縱軸數據，第二獲取單元包括：第二獲取模塊，用於在待顯示的縱軸數據中獲取字符長度最長的數據，得到縱軸目標數據，繪製單元包括：第一繪製模塊，用於創建canvas畫布並在canvas畫布繪製縱軸目標數據，計算單元包括：第二計算模塊，用於計算縱軸目標數據在canvas畫布上所佔據的寬度，得到縱軸目標寬度，第一顯示單元包括：第一顯示模塊，用於根據縱軸目標寬度調整Echarts圖表的縱軸邊距並在調整縱軸邊距後的Echarts圖表的縱軸上顯示待顯示的縱軸數據。
進一步地，第一獲取單元包括：第三獲取模塊，用於獲取在Echarts圖表的橫軸上 需要進行顯示的數據，得到待顯示的橫軸數據，第二獲取單元包括：第四獲取模塊，用於在待顯示的橫軸數據中獲取字符長度最長的數據，得到橫軸目標數據，繪製單元包括：第二繪製模塊，用於創建canvas畫布並在canvas畫布繪製橫軸目標數據，計算單元包括：第三計算模塊，用於計算橫軸目標數據在canvas畫布上所佔據的寬度，得到橫軸目標寬度，第一顯示單元包括：第二顯示模塊，用於根據橫軸目標寬度調整Echarts圖表的橫軸邊距並在調整橫軸邊距後的Echarts圖表的橫軸上顯示待顯示的橫軸數據。
通過本申請，採用以下步驟：獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據；在待顯示數據中獲取字符長度最長的數據，得到目標數據；創建canvas畫布並在canvas畫布上繪製目標數據；計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度；以及根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據，解決了相關技術中當Echarts圖表中數據長度過長時，容易導致數據顯示不完整的問題，通過在canvas畫布上繪製字符長度最長的數據，來計算目標數據在canvas畫布上所佔據的寬度，得到目標寬度，從而根據目標寬度調整Echarts圖表中坐標軸上顯示字符串所需的寬度，即能夠根據實際顯示的數據進行自動調整Echarts圖表的邊距，進而實現保證Echarts圖表中的數據顯示完整的效果。
附圖說明
構成本申請的一部分的附圖用來提供對本申請的進一步理解，本申請的示意性實施例及其說明用於解釋本申請，並不構成對本申請的不當限定。在附圖中：
圖1是根據本申請實施例的Echarts圖表的數據顯示方法的流程圖；以及
圖2是根據本申請實施例的Echarts圖表的數據顯示裝置的示意圖。
具體實施方式
需要說明的是，在不衝突的情況下，本申請中的實施例及實施例中的特徵可以相互組合。下面將參考附圖並結合實施例來詳細說明本申請。
為了使本技術領域的人員更好地理解本申請方案，下面將結合本申請實施例中的附圖，對本申請實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分的實施例，而不是全部的實施例。基於本申請中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都應當屬於本申請保護的範圍。
需要說明的是，本申請的說明書和權利要求書及上述附圖中的術語「第一」、「第 二」等是用於區別類似的對象，而不必用於描述特定的順序或先後次序。應該理解這樣使用的數據在適當情況下可以互換，以便這裡描述的本申請的實施例。此外，術語「包括」和「具有」以及他們的任何變形，意圖在於覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統、產品或設備不必限於清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對於這些過程、方法、產品或設備固有的其它步驟或單元。
根據本申請的實施例，提供了一種Echarts圖表的數據顯示方法。
圖1是根據本申請實施例的Echarts圖表的數據顯示方法的流程圖。如圖1所示，該方法包括以下步驟：
步驟S101，獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據。
獲取需要在Echarts圖表上進行顯示的數據，得到待顯示數據。例如，獲取到的待顯示數據為10000，9500，120000，3000等多個數據。
在獲取待顯示數據之後，對Echarts圖表進行初始化。在對Echarts圖表進行初始化的過程中，會涉及到對Echarts圖表的邊距的設定，通過設定Echarts圖表的邊距則確定了Echarts圖表中坐標軸的顯示範圍。因此，在對Echarts圖表進行初始化的過程中，會判斷待顯示數據的長度是否過長，是否容易超出Echarts圖表中坐標軸的顯示範圍導致部分數據被截斷顯示不完整。如果判定待顯示數據的長度過長，則執行步驟S102。如果判定待顯示數據的長度沒有超出Echarts圖表中坐標軸的顯示範圍，則直接對待顯示數據進行顯示。
步驟S102，在待顯示數據中獲取字符長度最長的數據，得到目標數據。
例如，獲取到的待顯示數據為10000，9500，120000，3000等多個數據，在待顯示數據中獲取字符長度最長的數據為120000，120000即為目標數據。
步驟S103，創建canvas畫布並在canvas畫布上繪製目標數據。
由於Echarts圖表是在canvas畫布進行顯示的，根據上述得到的目標數據的字符長度並不能精確計算該目標數據在canvas畫布中所佔寬度，需要計算目標數據在canvas畫布中所佔據的寬度，因此需要創建canvas畫布並在canvas畫布上繪製目標數據。通過在HTML文檔的Body節點，插入一個canvas元素，即新建了一個canvas畫布。需要說明的是，新創建的canvas畫布和Echarts圖表需要保持一致的高度和寬度。
步驟S104，計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的 寬度。
可選地，在本申請實施例提供的Echarts圖表的數據顯示方法中，計算目標寬度包括：確定繪製目標數據的像素點在canvas畫布上的起始位置；確定繪製目標數據的像素點在canvas畫布上的終止位置；以及根據起始位置和終止位置計算目標寬度。
例如，在新創建的canvas畫布，例如，使用黑色(十六進位值為：#000000)從canvas畫布的左上角繪製目標數據，繪製的目標數據的大小和Echarts圖表中顯示的目標數據大小一致，繪製完成後，需計算目標數據在canvas畫布所佔據的寬度，從左上角開始(因為canvas畫布的坐標0點在左上角)，依次遍歷每個像素點數據，查找像素點顏色值為#000000的像素點，且距離canvas畫布左側邊界最遠的像素點，取得此像素點的橫坐標，即計算得到所繪製的目標數據在canvas畫布上實際所佔據的寬度。
需要說明的是，在本申請實施例提供的Echarts圖表的數據顯示方法中，不限定canvas畫布使用具體某種顏色繪製目標數據。
步驟S105，根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據。
可選地，在本申請實施例提供的Echarts圖表的數據顯示方法中，獲取待顯示數據包括：獲取在Echarts圖表的縱軸上需要進行顯示的數據，得到待顯示的縱軸數據，在待顯示數據中獲取字符長度最長的數據，得到目標數據包括：在待顯示的縱軸數據中獲取字符長度最長的數據，得到縱軸目標數據，創建canvas畫布並在canvas畫布上繪製目標數據包括：創建canvas畫布並在canvas畫布繪製縱軸目標數據，計算目標寬度包括：計算縱軸目標數據在canvas畫布上所佔據的寬度，得到縱軸目標寬度，根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據包括：根據縱軸目標寬度調整Echarts圖表的縱軸邊距並在調整縱軸邊距後的Echarts圖表的縱軸上顯示待顯示的縱軸數據。
可選地，在本申請實施例提供的Echarts圖表的數據顯示方法中，獲取待顯示數據包括：獲取在Echarts圖表的橫軸上需要進行顯示的數據，得到待顯示的橫軸數據，在待顯示數據中獲取字符長度最長的數據，得到目標數據包括：在待顯示的橫軸數據中獲取字符長度最長的數據，得到橫軸目標數據，創建canvas畫布並在canvas畫布上繪製目標數據包括：創建canvas畫布並在canvas畫布繪製橫軸目標數據，計算目標寬度包括：計算橫軸目標數據在canvas畫布上所佔據的寬度，得到橫軸目標寬度，根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據包括：根據橫軸目標寬度調整Echarts圖表的橫軸邊距並在調整橫軸邊距後的Echarts圖表的橫軸上顯示待顯示的橫軸數據。
需要說明的是，本申請實施例提供的Echarts圖表的數據顯示方法，可以根據橫軸目標寬度調整Echarts圖表的橫軸邊距並在調整橫軸邊距後的Echarts圖表的橫軸上顯示待顯示的橫軸數據，也可以根據縱軸目標寬度調整Echarts圖表的縱軸邊距並在調整縱軸邊距後的Echarts圖表的縱軸上顯示待顯示的縱軸數據，也可以根據橫軸目標寬度調整Echarts圖表的橫軸邊距並且根據縱軸目標寬度調整Echarts圖表的縱軸邊距，並在調整橫軸邊距和調整縱軸邊距後的Echarts圖表的坐標軸上顯示待顯示數據。在本申請中，通過在實際的canvas畫布上繪製目標數據，來實際計算目標數據在canvas畫布上所佔據的寬度。通過上述得到的寬度動態調整Echarts圖表的坐標軸與邊界之間的邊距，從而解決了相關技術中當Echarts圖表中數據長度過長時，容易導致數據顯示不完整的問題。
本申請實施例提供的Echarts圖表的數據顯示方法，通過獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據；在待顯示數據中獲取字符長度最長的數據，得到目標數據；創建canvas畫布並在canvas畫布上繪製目標數據；計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度；以及根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據，解決了相關技術中當Echarts圖表中數據長度過長時，容易導致數據顯示不完整的問題，通過在canvas畫布上繪製字符長度最長的數據，來計算目標數據在canvas畫布上所佔據的寬度，得到目標寬度，從而根據目標寬度調整Echarts圖表中坐標軸上顯示字符串所需的寬度，即能夠根據實際顯示的數據進行自動調整Echarts圖表的邊距，進而實現保證Echarts圖表中的數據顯示完整的效果。
需要說明的是，在附圖的流程圖示出的步驟可以在諸如一組計算機可執行指令的計算機系統中執行，並且，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同於此處的順序執行所示出或描述的步驟。
本申請實施例還提供了一種Echarts圖表的數據顯示裝置，需要說明的是，本申請實施例的Echarts圖表的數據顯示裝置可以用於執行本申請實施例所提供的用於Echarts圖表的數據顯示方法。以下對本申請實施例提供的Echarts圖表的數據顯示裝置進行介紹。
圖2是根據本申請實施例的Echarts圖表的數據顯示裝置的示意圖。如圖2所示，該裝置包括：第一獲取單元10、第二獲取單元20、繪製單元30、計算單元40和第一顯示單元50。
第一獲取單元10，用於獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據。
第二獲取單元20，用於在待顯示數據中獲取字符長度最長的數據，得到目標數據。
繪製單元30，用於創建canvas畫布並在canvas畫布上繪製目標數據。
計算單元40，用於計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度。
第一顯示單元50，用於根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據。
本申請實施例提供的Echarts圖表的數據顯示裝置，通過第一獲取單元10獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據；第二獲取單元20在待顯示數據中獲取字符長度最長的數據，得到目標數據；繪製單元30創建canvas畫布並在canvas畫布上繪製目標數據；計算單元40計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度；以及第一顯示單元50根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據，解決了相關技術中當Echarts圖表中數據長度過長時，容易導致數據顯示不完整的問題，通過在canvas畫布上繪製字符長度最長的數據，來計算目標數據在canvas畫布上所佔據的寬度，得到目標寬度，從而根據目標寬度調整Echarts圖表中坐標軸上顯示字符串所需的寬度，即能夠根據實際顯示的數據進行自動調整Echarts圖表的邊距，進而實現保證Echarts圖表中的數據顯示完整的效果。
可選地，在本申請實施例提供的Echarts圖表的數據顯示裝置中，計算單元40包括：第一確定模塊，用於確定繪製目標數據的像素點在canvas畫布上的起始位置；第二確定模塊，用於確定繪製目標數據的像素點在canvas畫布上的終止位置；以及第一計算模塊，用於根據起始位置和終止位置計算目標寬度。
可選地，在本申請實施例提供的Echarts圖表的數據顯示裝置中，第一獲取單元10包括：第一獲取模塊，用於獲取在Echarts圖表的縱軸上需要進行顯示的數據，得到待顯示的縱軸數據，第二獲取單元20包括：第二獲取模塊，用於在待顯示的縱軸數據中獲取字符長度最長的數據，得到縱軸目標數據，繪製單元30包括：第一繪製模塊，用於創建canvas畫布並在canvas畫布繪製縱軸目標數據，計算單元40包括：第二計算模塊，用於計算縱軸目標數據在canvas畫布上所佔據的寬度，得到縱軸目標寬度，第一顯示單元50包括：第一顯示模塊，用於根據縱軸目標寬度調整Echarts圖表的縱軸邊距並在調整縱軸邊距後的Echarts圖表的縱軸上顯示待顯示的縱軸數據。
可選地，在本申請實施例提供的Echarts圖表的數據顯示裝置中，第一獲取單元10包括：第三獲取模塊，用於獲取在Echarts圖表的橫軸上需要進行顯示的數據，得到待顯示的橫軸數據，第二獲取單元20包括：第四獲取模塊，用於在待顯示的橫軸數據中獲取字符長度最長的數據，得到橫軸目標數據，繪製單元30包括：第二繪製模塊， 用於創建canvas畫布並在canvas畫布繪製橫軸目標數據，計算單元40包括：第三計算模塊，用於計算橫軸目標數據在canvas畫布上所佔據的寬度，得到橫軸目標寬度，第一顯示單元50包括：第二顯示模塊，用於根據橫軸目標寬度調整Echarts圖表的橫軸邊距並在調整橫軸邊距後的Echarts圖表的橫軸上顯示待顯示的橫軸數據。
所述Echarts圖表的數據顯示裝置包括處理器和存儲器，上述第一獲取單元、第二獲取單元、繪製單元、計算單元和第一顯示單元等均作為程序單元存儲在存儲器中，由處理器執行存儲在存儲器中的上述程序單元實現相應功能。
處理器中包含內核，由內核去存儲器中調取相應的程序單元。內核可以設置一個或以上，通過調整內核參數顯示Echarts圖表中的數據。
存儲器可能包括計算機可讀介質中的非永久性存儲器，隨機存取存儲器(RAM)和/或非易失性內存等形式，如只讀存儲器(ROM)或快閃記憶體(flash RAM)，存儲器包括至少一個存儲晶片。
本申請還提供了一種電腦程式產品的實施例，當在數據處理設備上執行時，適於執行初始化有如下方法步驟的程序代碼：獲取待顯示數據，其中，待顯示數據為需要在Echarts圖表上進行顯示的數據；在待顯示數據中獲取字符長度最長的數據，得到目標數據；創建canvas畫布並在canvas畫布上繪製目標數據；計算目標寬度，其中，目標寬度為目標數據在canvas畫布上所佔據的寬度；以及根據目標寬度調整Echarts圖表的邊距並在調整後的Echarts圖表上顯示待顯示數據。
需要說明的是，對於前述的各方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領域技術人員應該知悉，本申請並不受所描述的動作順序的限制，因為依據本申請，某些步驟可以採用其他順序或者同時進行。其次，本領域技術人員也應該知悉，說明書中所描述的實施例均屬於優選實施例，所涉及的動作和模塊並不一定是本申請所必須的。
在上述實施例中，對各個實施例的描述都各有側重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關描述。
在本申請所提供的幾個實施例中，應該理解到，所揭露的裝置，可通過其它的方式實現。例如，以上所描述的裝置實施例僅僅是示意性的，例如所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現時可以有另外的劃分方式，例如多個單元或組件可以結合或者可以集成到另一個系統，或一些特徵可以忽略，或不執行。
所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位於一個地方，或者也可以分布到多個網絡單元上。可以根據實際的需要選擇其中的部分或者全部單元來實現本實施例 方案的目的。
另外，在本申請各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以採用硬體的形式實現，也可以採用軟體功能單元的形式實現。
顯然，本領域的技術人員應該明白，上述的本申請的各模塊或各步驟可以用通用的計算裝置來實現，它們可以集中在單個的計算裝置上，或者分布在多個計算裝置所組成的網絡上，可選地，它們可以用計算裝置可執行的程序代碼來實現，從而，可以將它們存儲在存儲裝置中由計算裝置來執行，或者將它們分別製作成各個集成電路模塊，或者將它們中的多個模塊或步驟製作成單個集成電路模塊來實現。這樣，本申請不限制於任何特定的硬體和軟體結合。
以上所述僅為本申請的優選實施例，並不用於限制本申請，對於本領域的技術人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本申請的保護範圍之內。