門外漢的筆記

裝置的解析度≠顯示的範圍

顯示的範圍會因裝置上的狀態列、工具列等縮小顯示範圍，因此需妥善配置排版與增加顯示範圍。

下面是用來查看裝置與顯示範圍

<script>

基於範例進行修改

1. 日期取最近6個月

2.頭尾貼齊

3.區間顏色

window.opener

建立一個共用的Child作為資料查詢頁面，當需要此Child頁面時，透過Parent頁面開啟Chile作為新分頁，在Child頁面將選擇的值回傳給Parent頁面。

window.opener

 Parent 頁面 

jquery取得後端回傳的json

後端
return json(result);

前端
var model = '@Html.Raw(Json.Encode(Model))';

 Client端 

$.ajax({
                url: '/tbRMAs/_Details',
                type: 'get',
                data: { id: '202'},  //發送的Parameter

在新電腦與新版visual studio 2019建立新的網頁，在執行相同網頁時，出現了錯誤訊息。

HTTP401: 遭拒絕 - 要求的資源需要使用者驗證。(XHR)POST - https://localhost:44368/stack_bar.aspx/ajax_query_data?0.03176067172150532

經網路教學文章，編輯App_Start資料夾下的RouteConfig.cs檔案，將settings.AutoRedirectMode = RedirectMode.Permanent修改為RedirectMode.Off。

使用此方法就能解決這樣的問題，但在visual studio 2017未修改也不會發生這樣的問題。

將二維資料的行列進行交換10*5=>5*10

function array_transform_2_2(arr) {
            var newArray = arr[0].map(function(col, i) {
                return arr.map(function(row) {
                return row[i];

Pie chart為FACTORY_A的資料

Stacked bar chart為各Factory的defect堆疊圖

兩者的共通性為defect，所以當篩選Defect時，兩者之間會連動。

後端資料處裡請參考 [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" }]

因d3.js靈活性較高，且在前端視覺開發上直接結合jquery設計，可以呈現多樣化的功能。

後端主要為資料查詢與統計數量

1. 資料查詢

string strSql = "SELECT * FROM tbRMA";
DataTable myTable = dataQuery.queryToDataTable(strSql);

在Excel中，可以使用樞紐功能比較兩個欄位的關聯性。

在C#也能操作相同的功能