與d3和webView原生反應

Question

我試圖讓我的腦袋周圍如何添加d3圖來回應本機應用程序。只有我發現的信息是使用webView，但會非常感激有一些工作的東西的例子可能在github。

Answer 1

我用d3做了一個餅圖而不使用webview。使用D3，您生成圖表，並將所得SVG代碼放置到一個形狀組成：

<Surface width={100} height={100} > 
    <Group x={50} y={50} > 
    <Shape d={'M...Here goes the svg code'} 
      stroke={'#000'} 
      strokeWidth={1} 
      fill={'#FF0000'} /> 
    </Group> 
</Surface> 

一個簡單的例子可以在這裏找到：https://github.com/radogost/PieChartExample

可能使用這種方法，你可以創建現場更新圖表？

Answer 2

我有其他的庫和創建的本地HTML文件：

<WebView source={{uri: 'file:///android_asset/webview.html'}} style={{ 
     height: 180, 
     borderWidth: 2, 
     width: 400 
    }}></WebView> 

而在webview.html我有：在時刻

<script src="Chart.min.js"></script> 

<h1>Hellosss</h1> 
<canvas id="myChart" width="400" height="400"></canvas> 
<script> 

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, 56, 55, 40] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
}; 
var ctx = document.getElementById("myChart").getContext("2d"); 
myLineChart = new Chart(ctx).Line(data, { 
     animation: false, 
     scaleBeginAtZero: true }); 

</script> 

問題，我用這個解決方案發現我做不到實時更新，並原生應用程序和webview之間的雙向通信。

有什麼建議嗎？我需要傳遞authToken加上更新的數據，而不是刷新頁面。