about 6 years ago

最近需要能夠將部分的資料輸出成報表

既然稱之為報表,我夢想中的報表還是如同電影情節般的報表,但是無奈美工能力實在低落

所以我想還是利用別人提供的API來實作比較快

以下為Google Charts ,之前有找到另外一個版本的,頁面上的說明似乎被移除了,只有找到這種的,透過javascript,而非image 的src

https://google-developers.appspot.com/chart/interactive/docs/basic_load_libs
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

以下是我實作圖表的範例,提供給各位參考

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['任務項目', 'Hours per Day'],
          ['前台',<%=Case_cnt1 %>],
          ['中台',     <%=Case_cnt3 %>],
          ['後台',      <%=Case_cnt5 %>],
          ['系統',  <%=Case_cnt6 %>],
         
        ]);

        var options = {
          title: '未處理案件數量',
          is3D: true
        };

        var data2 = google.visualization.arrayToDataTable([
          ['類別', '反映數', '完成數'],
          ['前台',  <%=Case_U1 %>,      <%=Case_D1 %>],
          ['中台',  <%=Case_U2 %>,      <%=Case_D2 %>],
          ['後台',  <%=Case_U3 %>,       <%=Case_D3 %>],
          ['系統',  <%=Case_U4 %>,      <%=Case_D4 %>],
          ['R2'  ,  <%=Case_U5 %>,      <%=Case_D5 %>]
        ]);

        var options2 = {
          title: '本周案件反應與處理數',
          hAxis: {title: '類別', titleTextStyle: {color: 'red'}}
        };

        var data3 = google.visualization.arrayToDataTable([
          ['星期', '本周數量', '上周數量'],
          ['MON',  <%=Case_R1 %>,      <%=Case_L1 %>],
          ['TUE',  <%=Case_R2 %>,      <%=Case_L2 %>],
          ['WED',  <%=Case_R3 %>,       <%=Case_L3 %>],
          ['THU',  <%=Case_R4 %>,      <%=Case_L4 %>],
          ['FRI',<%=Case_R5 %>,<%=Case_L5 %>]
        ]);

        var options3 = {
          title: '本周與上周每日案件數量比較'
        };
                //PieChart 圓餅圖
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
                //ColumnChart 長條圖
        var chart2 = new google.visualization.ColumnChart(document.getElementById('piechart_3d1'));
        chart2.draw(data2, options2);
            //LineChart 線型圖
        var chart3 = new google.visualization.LineChart(document.getElementById('piechart_3d2'));
        chart3.draw(data3, options3);
      }
 </script>

結合動態資料產生,就可以變成動態的圖表了,就個人而言,我省去了要如何透過Excel產生的困擾...

← Asp.Net Cookie 中文亂碼 避免使用者意外離開頁面 →
 
comments powered by Disqus