GM_xmlhttpRequest & overrideMimeType

最近在寫 user script 的時候不小心發現, 原來 GM_xmlhttpRequest 可以拿來處理 corss-domain 的 request.

不過有個地方需要特別注意一下, 取得其他 domain 的 request 之後, 想使用 DOM 來處理, 在使用 innerHTML 的同時, 瀏覽器會向當時畫面的主機請求 href="this/is/a/link" 或是 src="this/is/a/file.jpg"
等資料, 所以要特別注意, 必須要先經過處理才可以使用 innerHTML.

另外因為 GM_xmlhttpRequest 取回 request 預設是使用 UTF-8 來處理的, 如果取回的資料是其他語系的話, 可以使用 overrideMimeType 來處理, 這樣文字就可以正常顯示了.

GM_xmlhttpRequest({ method: "GET", url: "http://cross.domain.com/index.html", // 處理非 UTF-8 字型 overrideMimeType: "text/html; charset=Shift_JIS", onload: function(t) { // 將 href/src 內容裡, 非 http:// 開頭的全部加上原本的 domain. var foo = t.responseText .replace(/(href|src)\=[\"\'](?!http\:\/\/)(.*?)[\"\']/ig, '$1="http://cross.main.com/$2"'); var bar = document.createElement("DIV"); // 寫入的同時會向主機要求 href/src 的內容. bar.innerHTML = foo; } });

Google Chart API (12) - Scatter plots

用法: cht=s
散點圖使用不同的方式來處理多組資料. 散點圖只允許顯示一組資料在圖表上. 儘管是使用了三組資料來指定每個點的 x 位置, y 位置, 與選用的大小.

參數:
cht=s

說明:
需提供兩組資料: 第一組指定 x 座標, 第二組指定 y 座標.
預設的形狀是小圓點. 可以使用 chm 參數來修改形狀, 參考 Shape markers.
顏色預設是藍色. 可參考 Colors 來修改顏色.
本範例中, 你會注意到每個資料有不同的大小. 達到這樣效果, 只需要指定第三組資料.

範例:

cht=s

Google Chart API (11) - Venn diagrams

用法: cht=v
只支援一組資料:

• 前三個值指定 A, B, C 三個圓的相對尺寸.
• 第四個值指定 A 與 B 的交叉區域
• 第五個值指定 A 與 C 的交叉區域
• 第六個值指定 B 與 C 的交叉區域
• 第七個值指定 A 與 B 與 C 的交叉區域

參數:

cht=v

說明:
本範例中三個圓分別是 100, 80, 60. 每個圓之間的重疊是 30.
維恩圖其他可用參數可參考 Optional parameters by chart type.

範例:

cht=v
chd=t:100,80,60,30,30,30,10

Google Chart API (10) - Pie charts

用法: cht=<pie chart type>
其中 <pie chart type> 是 p, p3:

• 只支援一組資料, 其餘的全部會被忽略

注意: Google Chart API 會依照指定的長寬(chs)來計算圓周半徑. 如果圖表內包含了標籤, 最好是將寬度設定為高度的兩倍.

參數:
cht=p

說明:
二維圓餅圖.
除非額外指定, 否則圓餅上每個部分的顏色將由深橘色到淡黃色顯示. 指定顏色請參考 Colors.
可使用 chl 來指定標籤, 詳細請參考 Pie chart labels.

範例:

cht=p
chs=200x100


參數:

cht=p3

說明:
3D圓餅圖.

範例:

cht=p3
chs=250x100

Google Chart API (9) - Bar charts

用法: cht=<bar chart type>
其中 <bar chart type> 可以是 bhs, bhg, bvs 或 bvg:

• 根據不同類型的圖表, 多組資料可能是堆疊在一起或是在同一組的條型圖

參數:
cht=bhs | cht=bvs
分別是水平跟垂直方向的條型圖, 同位置的資料會堆疊在一起


說明:
一組資料

範例:



說明:
兩組資料
如圖所顯示的, 不同組的資料會堆疊在一起, 所以必須將每組資料指定不同的顏色. 當然也可以替每個資料加上各自的顏色. 細節部分請參考 Colors.
還有此範例並沒有指定資料比例, 所以超過 100 的資料並沒有顯示出來.
範例:



說明:
把上個範例指定了資料比例, 長條就會依照比例正常顯示

範例:




參數:
cht=bhg | cht=bvg

說明:
分別是水平跟垂直方向的條型圖, 同位置的資料會放在一起做比較


範例:

注意: 這裡只有顯示出一小部分


參數:
chbh

說明:
條型圖的圖形大小比其他種類的圖形難處理.
不論是橫的 bhs 或 bhg 或是豎的 bvs 或 bvg, 圖形大小都是決定於 chs 參數. 但是當尺寸指定太小時圖表就會被剪裁掉.
因為這個原因所以你可以參照 bar width and spacing 來指定額外的參數
chbh= <bar width in pixels>, <optional space between bars in a group>, <optional space between groups>

注意: 假如沒有提供第三個參數, 則預設為每組之間空格的一半.

範例:

省略了 chbh 所以圖形有被剪裁掉一些

chbh=10

Google Chart API (8) - Sparklines

用法: cht=ls

波型圖的參數跟折線圖一樣. 唯一不同的是波型圖預設不顯示出軸線.
另外參考 Multiple axis labels 你也可以自己替圖表加上軸線.

Google Chart API (7) - Line charts

用法: cht=<line chart type>
其中 <line chart type> 可以是 lc 或 lxy:

• lc: 有多少組資料就會繪製成多少條線
• lxy: 每條線需要提供一對資料

參數:
cht=lc

說明:
基本折線圖, 每個資料平均的分佈在 x 軸上.

範例:


參數:
cht=lxy

說明:
每條線必須提供兩組資料, 第一組指定 x 軸座標, 第二組指定 y 軸座標.
如果提供一個未定義的數值, 會將資料平均的分布在 x 軸上. 所謂未定義的數值在本範例使用 Text encoding 所以使用 -1. 而 Simple encoding 就是 _, Extended 就是 __ 帶定義.
另外可以使用 chm 指定資料點的形狀, 請參考 Shape markers 章節.
指定線條顏色可參考 Colors 章節.

範例: