Question

我试图了解如何添加d3图表以响应原生应用。我发现的唯一信息是使用webView，但非常感谢有一些工作的例子可能在github中。

Answer 1

我在没有使用webview的情况下用d3制作了一个饼图。使用d3生成图表并将生成的SVG代码放置到Shape组件：

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

使用d3和webView反应原生

2 个答案: