同じページに複数のJavaScriptの統計グラフを表示します.

もっと読む
最近、私は開発任務を受けました.「アフターサービス顧客満足度調査アンケート」にお客様が記入したフィードバックの答えについて統計を取りたいです.
問題の例は以下の通りです.
最後はいつ私たちの製品を買いましたか?サービスマンの態度は友好的で、仕事は責任を果たしますか?弊社が提供しているアフターサービスの全体的な感想はいかがですか?です
 
私が実現したい機能はレポートを出して、同じページで問題ごとに答えが現れる回数を示しています.
簡単な効果を実現しました.下図のように:
 
もちろん6つのアイコンは同じテストデータを使っています.主に複数のグラフが同じページに表示されるレイアウトの問題を解決しました.
みんなは次のリンクで効果をテストします.Chrome開発者ツールで093_を確認できます.chart.の実現.
http://i042416.github.io/FioriODataTestTool2014/WebContent/093_chart.
携帯で開く効果.
 
コードを簡単に通過します.
 
二つのdivにはそれぞれ6つのcanvasが含まれています.一つ目のdivは6つの円グラフで問題の結果を表示し、二つ目のdivの中の6つのcanvasはヒストグラムを表示します.canvasごとに表記しました.importentのdisplay:inline属性は、これらがcanvasノード内にある統計図を左から右に表示させ、デフォルトの表示毎に改行させることではない.

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ノードのclientWidth属性によって獲得し、6.5で割った後、各統計図の幅とする.6.5で割ったのは6ではなく、各行の統計図の間に空隙を残すためである.
統計図の種類は、XとY座標のデータとラベルが、optionオブジェクトを介して関数createChartOnvasに入ってきます.
 
もっとJerryのオリジナル技術記事を取得するには、公衆番号の「汪子煕」または次の二次元コードをスキャンしてください.