Reagieren Sie nativ mit d3 und webView

Question

Ich versuche, meinen Kopf herum zu bekommen, wie man d3 Graphen hinzufügt, um native App zu reagieren. Nur Informationen, die ich gefunden habe, ist es, webView zu verwenden, aber ich würde sehr dankbar sein, ein paar Beispiele für Arbeitsmaterial in github zu haben.

Answer 1

Ich habe ein Kreisdiagramm mit d3 ohne Verwendung eines Webview erstellt. Mit d3, erzeugen Sie Ihr Diagramm und legen Sie den resultierenden SVG-Code in eine Form Komponente:

<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> 

Ein einfaches Beispiel finden Sie hier: https://github.com/radogost/PieChartExample

Vielleicht mit diesem Ansatz, Sie sind in der Lage Live aktualisiert erstellen Diagramme?

Answer 2

Ich habe andere Bibliothek und erstellte lokale HTML-Datei:

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

Und in webview.html ich habe:

<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> 

Ausgabe im Moment, wo ich mit dieser Lösung zu finden, ich nicht Live-Update tun kann, und Kommunikation in beide Richtungen zwischen nativer App und Webview.

Irgendwelche Vorschläge? Ich muss authToken plus aktualisierte Daten übergeben und Seite nicht aktualisieren.