如何在您的網站中嵌入 BullionVault 金銀走勢圖

本頁面將會為您解釋如何將 BullionVault 的實時金銀走勢圖添加到一個網站中，並且為您列出所有可用於客戶定制走勢圖的可用配置選項。同時您還可能對嵌入客戶定製版本的 BullionVault 價格顯示工具感興趣。

加載走勢圖

此走勢圖採用 javascript 編寫並由 BullionVault 的服務器管理。您不需要下載走勢圖到其他服務器。只需要將以下的腳本添加到你想要嵌入的走勢圖的頁面中即可。

			
				<!doctype html>
				<head>
					<script type="text/javascript" src="https://www.bullionvault.com/chart/bullionvaultchart.js?v=1"></script>
				</head>

創建走勢圖實例

走勢圖是通過運用兩個參數並調用 BullionVaultChart 構造函數而實施添加。第一個參數是一個關聯數組與配置選項。所有可用的選項如下所列。第二個參數是 DOM 元素的走勢圖應該嵌入到的 ID 位置。這可以是一個 DIV 或任何其他塊元素。

			
				<div id="chartContainer" style="height: 300px; width: 500px;"></div>

				<script type="text/javascript" >
					var options = {bullion: 'gold'};
					var chartBV = new BullionVaultChart(options, 'chartContainer');
				</script>

走勢圖初始化選項

bullion	選擇走勢圖中現實的金屬類型。請注意，如果切換金銀的按鈕都顯示在按鈕面板（切換金銀），存儲在 Cookie 中的用戶設置的優先級高於這個選項。可接受的標準： 'gold' 或 'silver'
currency	選擇需要顯示的貨幣種類。請注意，如果切換貨幣的下拉選單顯示在按鈕面板請注意，如果切換金條的按鈕都顯示在按鈕面板（切換貨幣），存儲在 cookie 中的用戶設置的優先級高於這個選項。可接受的標準： 'USD，'GBP'，'EUR'，'JPY'，'AUD'，'CAD'，'CHF'
timeframe	選擇走勢圖中顯示的時段- 從 10 分鐘到 20 年。請注意，如果切換顯示時段的按鈕都顯示在按鈕面板（切換時段），存儲在 Cookie 中的用戶設置的優先級高於這個選項。可接受的標準: '10m', '1h', '6h', '1d', '1w', '1m', '1q', '1y', '5y', '20y'
chartType	走勢圖展示的種類。我們提供曲線圖和最高-最低-收盤圖請注意，如果走勢圖種類的下拉選單顯示在按鈕面板請注意，如果切換金條的按鈕都顯示在按鈕面板（切換走勢圖種類），存儲在cookie 中的用戶設置的優先級高於這個選項。可接受的標準： 'line' 或 'hlc'
miniChartMode	切換走勢圖至“迷你走勢圖”模式，這個模式可支持非常小的走勢圖尺寸，但會缺少一些功能。這個模式的走勢圖是為了讓您可以將其置放於您的網站的頁面兩邊的小空位處。可接受的標準： true 或 false
miniChartModeAxis	指定 Y 軸在迷你走勢圖中顯示。可接受的標準： 'kg'，'oz' 或 'both'
referrerID	如果您參與了我們的客戶推薦計劃，可以使用這個參數，在走勢圖中添加推薦鏈接，並通過此鏈接推薦新客戶到我們網站並獲得推薦人獎勵。可接受的標準：您的 BullionVault 用戶名，例： 'MYUSERNAME'
containerDefinedSize	控制走勢圖的大小應該調整到它的 parent element （包含分區），或者會調整到窗口（或一個 iframe），並相應地調整自身的大小。可接受的標準： true 或 false
displayLatestPriceLine	顯示/ 隱藏顯示最新的價格和上次更新的時間的線。可接受的標準： true 或 false
switchBullion	顯示/ 隱藏切換黃金/白銀的按鈕。可接受的標準： true 或 false
switchCurrency	顯示/ 隱藏切換貨幣種類的下拉列表。可接受的標準： true 或 false
switchTimeframe	顯示/ 隱藏切換時間間隔的按鈕。可接受的標準： true 或 false
switchChartType	顯示/ 隱藏切換走勢圖種類的下拉列表。可接受的標準： true 或 false
exportButton	顯示/ 隱藏導出按鈕，該按鈕可以讓用戶以CSV 文件格式下載走勢圖數據。可接受的標準： true 或 false

選項備註

切換所接受的引用標準無大小寫區別。
您的推薦人 ID 將會是您的 BullionVault 用戶名。例如：如果您的用戶名是 JOHNSMITH101，那麼這個就是你的推薦人 ID。
除非 miniChartMode 模式選用 true 標準，否則 MiniChartModeAxis 的切換將不能被採用。
如果走勢圖採用 miniChartMode 模式，則控制元件的開關（如 switchBullion, switchCurrency, switchTimeframe, switchChartType 和 export）將不能被採用。所有可選擇控制的元素在此模式下被禁用。

可用的範例

走勢圖模式 1: 普通走勢圖模式，採用美元/千克和盎司為顯示單位，使用曲線圖顯示一周的時段內的黃金走勢，走勢圖尺寸為 660 x 400 px 並且帶有所有控制元件。

			
				<html>
				<head>
					<script type="text/javascript" src="https://zh-hant.bullionvault.com/chart/bullionvaultchart.js" ></script>
					<script type="text/javascript" >
						var options = {
							bullion: 'gold',
							currency: 'USD',
							timeframe: '1w',
							chartType: 'line',
							miniChartModeAxis : 'oz',
							referrerID: 'MYUSERNAME',
							containerDefinedSize: true,
							miniChartMode: false,
							displayLatestPriceLine: true,
							switchBullion: true,
							switchCurrency: true,
							switchTimeframe: true,
							switchChartType: true,
							exportButton: true
						};
						var chartBV = new BullionVaultChart(options, 'embed');
					</script>
				</head>
				<body>
				<div id="embed" style="height: 400px; width: 660px; "></div>
				</body>
				</html>

走勢圖模式 2: 嵌入式的迷你走勢圖模式，採用英鎊/盎司為現實單位，使用曲線圖顯示一天時段內的黃金走勢，走勢圖尺寸為 170 x 105 px。

			
				<html>
				<head>
					<script type="text/javascript" src="https://zh-hant.bullionvault.com/chart/bullionvaultchart.js" ></script>
					<script type="text/javascript" >
						var options = {
							bullion: 'gold',
							currency: 'GBP',
							timeframe: '1d',
							chartType: 'line',
							miniChartModeAxis : 'oz',
							referrerID: 'MYUSERNAME',
							containerDefinedSize: true,
							miniChartMode: true,
							displayLatestPriceLine: true,
							switchBullion: true,
							switchCurrency: true,
							switchTimeframe: true,
							switchChartType: false,
							exportButton: true
						};
						var chartBV = new BullionVaultChart(options, 'embed');
					</script>
				</head>
				<body>
				<div id="embed" style="height: 105px; width: 170px; "></div>
				</body>
				</html>