HTML5針對條形圖元素的JavaScript錨點

我爲我的應用程序創建了一個HTML5頁面，該頁面使用標準畫布繪製條形圖，並且我希望圖表中的每個條形都具有超鏈接深入瞭解更多數據。我知道這可能是一個簡單的問題，但我不熟悉JavaScript足以讓答案隨時可用。我畫的條形圖片分爲兩個部分，一旦填充整個區域，然後刪除「已經完成」的一部分，因爲這樣的：HTML5針對條形圖元素的JavaScript錨點

context.fillRect(elements[i][0], edgeOfChart, offset, 250) 
context.clearRect(elements[i][0], edgeOfChart, offset, 250.0 - heightComplete)

我如何添加一個錨點擊/觸摸過？

謝謝。

來源

2015-03-30 miwalsh

畫布是一個位圖圖像，你不能簡單地添加鏈接「進入」它。您可能需要在其上面放置實際的HTML'a'元素，或者在畫布元素本身上使用點擊處理程序，然後根據點擊的座標找出要採取的操作。 //有點相關：http://stackoverflow.com/questions/2932141/does-html5-canvas-have-the-equivalent-of-an-image-map – CBroe 2015-03-30 23:09:10

你可以嘗試[命中區域]（https：// developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility）。至少這就是最現代的API所提出的 - 不幸的是它幾乎不被支持...... – Xufox 2015-03-30 23:09:52

與Canvas進行交互有點痛苦。與其他技術中的畫布相同，您必須處理元素中的鼠標/觸摸事件，並計算條形圖的位置，以確定用戶是否點擊它。例如在你的例子中，你有一個矩形 elements [i] [0]，edgeOfChart，offset，250

如果用戶點擊你需要添加一個onclick事件監聽器到canvas，回調函數會發送給你一個帶有「事件對象」（參見http://www.w3schools.com/jsref/dom_obj_event.asp）的參數，您可以通過該參數獲取點擊鼠標的X和Y座標。

然後，你可以找出點擊的座標是否在酒吧。

要構建交互式圖表，建議使用的方法是基於元素的SVG，每個元素可以有自己的事件處理程序。有關詳細信息，請參閱SVG。

來源

2015-03-30 23:13:23 Keyang

謝謝你，那很完美！ – miwalsh 2015-03-30 23:21:00

HTML5針對條形圖元素的JavaScript錨點

回答

相關問題