鈦 - 繪製一個互動dlacenut圖表

我正在爲Android和IOS做鈦應用程序。我想展示一個交互式圖表，類似於snazzy-animated-pie-chart-html5-jquery或pie-chart-with-html5-canvas-element。鈦 - 繪製一個互動dlacenut圖表

我創建了一個web視圖，並將html圖表添加到此webview。它在IOS上正常工作，它顯示餅圖和交互性工作正常。

但是，當我在Android設備上嘗試它時，它顯示餅圖，但我無法選擇切片，因此交互不起作用。

在圖表單擊事件上，無論我觸摸什麼，下一個代碼總是返回相同的值。

var mouseX = clickEvent.pageX - this.offsetLeft; 
var mouseY = clickEvent.pageY - this.offsetTop;

你知道我該如何解決嗎？我可以用另一個x，y嗎？我正在使用http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js。我必須爲移動設備使用特定的jquery庫嗎？

這是最好的方法嗎？你知道另一種方式嗎？就像從零開始在鈦中創建圖表一樣，如果可能的話......

您是否知道一個簡單且可自定義的庫來執行此操作？

非常感謝您

UPDATE

我也試圖與jqplot庫，以及一個簡單的交互式餅圖（pie-donut-charts），和它發生一樣。它總是突出同一片。任何想法？謝謝！

來源

2013-08-29 A.Vila

通常人在鈦鈦raphel js http://mobile.tutsplus.com/tutorials/appcelerator/make-a-stock-quote-app-displaying-charts-with-raphael-js/ –

感謝您的回答。我正在考慮使用rapahel js，但它像使用svg而不是canvas，我認爲它在Android 2.x上不能正常工作，不是嗎？ –

我想我已經解決了這個問題，而不是使用Click事件，我用ontouchend事件：

document.ontouchend = function(e) { 

    var mouseX = e.changedTouches[0].pageX; 
    var mouseY = e.changedTouches[0].pageY; 

    //Calculate if the touch was inside or outside the chart and do the correct action 
}

我試圖在Android和IOS，它的工作原理確定，得到的位置觸摸確定。

來源

2013-08-30 09:16:55

鈦 - 繪製一個互動dlacenut圖表

回答

相關問題