內容簡介
Protovis Loader 是一個外掛,協助您使用 Protovis 腳本。Protovis 是在 Stanford 開發的 JavaScript 資料視覺化庫,可讓使用者在網頁上創建可交互的圖表。
將 JavaScript 代碼合併進 WordPress 文章可能會變得很棘手,因為 WordPress 在文章中輸入文字時會(有意地)對其進行消毒,進而干擾 JavaScript 運作。當我初次嘗試 JavaScript 時,這給我帶來了一些困難,就像這篇文章所描述的那樣。最後,我決定挽起袖子撰寫了一個外掛,使整個過程變得容易得多,而 Protovis Loader 就是這樣誕生了。
Protovis Loader 以以下兩種方式使整個過程變得輕鬆容易:
它隨附 Protovis JavaScript 庫的一份複本,啟用外掛後,連結就會自動包含在頁面標頭中。
它創建了一個名為 [pvis] 的捷徑,讓您非常輕鬆地在網誌文章和頁面中包含 Protovis 腳本。
使用方法:
在文章和頁面中簡單使用 [pvis] 捷徑,您想要包含 Protovis 圖表的位置即可。以下是一些選用參數:
type: ‘chart’(預設值)顯示帶有可選標題的框中的圖表,‘inline’ 沒有框(例如用於製作走勢圖)。
src: Protovis(JavaScript)代碼文件的路徑。
height: 用於圖表的畫布框的高度。
width: 用於圖表的畫布框的寬度。
img: 停用腳本或瀏覽器不支持 Protovis 時使用的替代圖片的路徑。
alt: 要求當停用腳本或瀏覽器不支持 Protovis 時使用的替代圖片相關的替代文本。
caption: 圖片說明文字。
如果在開啟的 [pvis] 標籤和 [/pvis] 標籤之間提供了任何內容,它將被視為要包含的 JavaScript。如果未提供 caption 欄位且提供了 src 欄位,它也可以被解釋為說明。
這是使用這個標籤的一個範例:
[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]
您可以在 the Stubborn Mule 上看到這個外掛的實例。
待完成事項清單
此清單尚未進行排優先級。
改善使用者代理(瀏覽器)偵測。
建立一個選項頁面。
允許自訂 CSS 檔案。
允許另外指定 Protovis JS 圖書館。
替換導入的腳本中的標籤,以允許在腳本中使用捷徑參數。
我相信將會有更多任務等待著我。
外掛標籤
開發者團隊
原文外掛簡介
Protovis Loader is a plugin which faciliates the use of Protovis scripts. Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.
Incorporating Javascript code into WordPress posts can be tricky as it (deliberately) sanitises text typed into posts, which interferes with Javascript. When I first began experimenting with Javascript, this cause me some difficulties, as described in this post. In the end, I decided to roll up my sleeves and write a plugin to make the whole process a lot easier. Protovis Loader was the result.
Protovis Loader makes the whole process a lot easier in two ways:
It ships with a copy of the Protovis javascript library and once the plugin is activated, links to the library will automatically be included in page headers.
It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.
Usage:
Simply use the [pvis] shortcode in your posts and pages where you want to include a Protovis chart. There are a number of optional parameters:
type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)
src: path to a Protovis (javascript) code file
height: height of canvas box for the chart
width: width of canvas box for the chart
img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis
alt: alt text for the fallback image
caption: image caption
If any content is supplied between the opening [pvis] tag and the closing [/pvis] tag, it is taken to be javascript for inclusion. It may also be interpreted as a caption, but only if a caption field is not supplied and a src field is supplied.
Here is an example of use of the tag:
[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]
You can see the plugin in action on the Stubborn Mule.
To-Do List
This list is not really prioritised yet.
Improve user-agent (browser) detection
Create an options page
Allow custom CSS files
Allow for alterntive specification of the protovis js library
Replace tags in the imported script to allow shortcode parameters to be used in the script
I’m sure there’ll be a lot more!
