門外漢的筆記

後端資料處裡請參考 [ASP.NET C#] 022 | 使用d3.js建立一般資料表 table

▲原始資料

生成Chart後，會因xAxis項次過多會名稱過長，導致無法完全輸出項次名稱。

透過設定option.xAxis.axisLabel可以改成這個問題

interval: 項目顯示間隔(如設定值1; 1,3,5顯示)

建議還是使用表格型式，資料操作上比較直觀，若需要資料輸出成Excel也不用再處裡一次。

(Google chart在產生圖形的時候會生成一張資料表，利用座標就可存取行列等相關值。)

若只是一般pie chart，可使用這種方式生成資料。

後端做過初步統計的資料

在某些查詢頁面，如果是用Session存放資料表，當發生timeout時，往往必須重新執行查詢操作。為了使操作者有更好的使用體驗，在某些重要頁面可以加入讓Session 不要發生timeout。

如果Session timeout預設是20分鐘，可以在頁面增加計時器，每隔一分鐘減少儲存的變數一次，當變數剩下一分鐘，代表即將發生timeout，此時就利用post方式重新計時。

[前端]

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

這是有實際使用的第三款視覺化模組，是一款開源且可免費商業使用。

功能很多，但是對於新手來說，操作可能較繁瑣。

同樣寫一個水平堆疊圖，ECharts必需每個series設定一次，而Google Chart只需要一次。

不過基本上，重複性高的程式碼都可透過遍歷方式解決。

IE11不支援

當表格首欄發生超出視窗時，為了增加閱讀方便，希望能將首欄固定在最上方。

可以透過在首欄內加上position:sticky及Top:0px

Top會對應前面Parent有設置Position: relative，實際試過單純使用sticky在Parent沒有relative情況下，不影響定位功能。

Top設多少取決於你想要設定的距離

Session常用來保存資料及跨頁面傳遞，大部分的gridview操作都是使用Session存放DataTable，但操作上要更小心。

最近遇到的狀況，在A.aspx頁面查詢資料後，另開新的分頁同為A.aspx頁面，查完資料後，再回到第一次開啟的頁面，當我選擇gridview分頁的下一頁，跑出來的資料變為後來開啟頁面的資料，原來是Session會覆蓋掉相同名稱的資料。

另外如果在A.aspx與B.aspx使用相同名稱的Session, 也會發生覆蓋的狀況。

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']}); //不同chart有對應的packages
      google.charts.setOnLoadCallback(drawChart);

function drawChart() {

建立如樞紐功能兩個欄位的資料表較表 DEFECT_NAME vs FACTORY

若資料筆數過多，建議在後端做第一階段統計。

1.載入經初步統計的資料

1. JSON資料格式的字串

{"tableName":"DEFECT_NAME vs FACTORY","xFieldName":"FACTORY","yFieldName":"DEFECT_NAME","data":[{"yField":"NOISE","xField":"FACTORY_A","COUNT":18},{"yField":"NO IMAGE","xField":"FACTORY_C","COUNT":2},{"yField":"NO IMAGE","xField":"FACTORY_A","COUNT":14}]}

物件型態: {"key":"value" } 或 物件+物件 {"key":{"key1":"value","key2":"value"} }

陣列型態:[] 或陣列+物件 [{"key":"value" }]或 [{"key1:"value" },{"key"2:"value" }]