与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加上更新的数据，而不是刷新页面。