怎么在同一頁面顯示多個JavaScript統(tǒng)計圖表

本篇內容主要講解“怎么在同一頁面顯示多個JavaScript統(tǒng)計圖表”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么在同一頁面顯示多個JavaScript統(tǒng)計圖表”吧!

我實現(xiàn)了一個簡單的效果，如下圖所示：

當然六個圖標用的都是一模一樣的測試數(shù)據(jù)，主要解決了多個圖表出現(xiàn)在同一個頁面里的布局問題。

手機上打開的效果。

簡單過一下代碼：

兩個div里各包含了6個canvas。第一個div負責用6個餅狀圖來顯示問題的結果，第二個div里的6個canvas則顯示柱狀圖。每個canvas我用了標注成!important的display:inline屬性，來強制讓這些位于canvas節(jié)點里的統(tǒng)計圖從左到右顯示，而不是默認的每顯示一個就換行。

function loaded(){   var totalWidth = getBodyNode().clientWidth;   console.log("width in load: " + totalWidth);   var aCharts = document.getElementsByTagName("canvas");   for( var i = 0; i < aCharts.length; i++){
         aCharts[i].width = totalWidth / 6.5;
   }   var option = {       type: "pie",       xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],       yAxisData: [12, 19, 3, 5, 2, 3],       yAxisLabel: "Number of Votes"
   };   for( var i = 1; i <= 6; i++ ){
         createChartOnCanvas("myChart" + i, option);
   }
   option.type = "bar";   for( var i = 1; i <= 6; i++ ){
        createChartOnCanvas("barChart" + i, option);
   }
}

第41行把當前窗口總的寬度通過body節(jié)點的clientWidth屬性來獲得，然后除以6.5，商即為每個統(tǒng)計圖的寬度。之所以除以6.5而不除以6是為了給每一行的統(tǒng)計圖之間預留一些空隙。

統(tǒng)計圖的類型，X和Y坐標的數(shù)據(jù)和標簽通過option對象傳入到函數(shù)createChartOnCanvas中。

到此，相信大家對“怎么在同一頁面顯示多個JavaScript統(tǒng)計圖表”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！