d3とwebViewでネイティブに反応する

Question

d3グラフを追加してネイティブアプリに反応する方法を頭に入れようとしています。私が見つけた情報はwebViewを使用することだけですが、おそらくgithubで作業することのいくつかの例があることに感謝します。

Answer 1

webviewを使用せずにd3で円グラフを作成しました。 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> 

問題をとネイティブアプリとウェブビューとの間の双方向のコミュニケーション

提案がありますか？ authTokenと更新されたデータを渡し、更新しないページを渡す必要があります。