React Nativeでチャート（グラフ）を描画するためのライブラリがいくつかあります。例えばこのへんとか↓
JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊
とはいうものの、できることが少なかったりなかなか思うようにいかないことがあったりします。
WebにもJSのチャート系ライブラリはいくつかあります。例えば有償のHighchartsなんかはかなり協力です。これから登場するChart.jsのようにMITライセンスのものもあります。
そういったWebのライブラリを使ったほうが案外良い結果になることもあるかも、という提言として今回の例を紹介してみます。
React NativeにはWebViewがあるため、Javascriptを有効にした状態で通常のWebと同じHTMLをレンダリングすることが可能です。そのHTML内でChart.jsをロードし、Webでのようにデータを登録することでグラフを描画できてしまいます。
ちょっと長いですが、まずコードから見てみます。
import React, { Component, PropTypes } from 'react'
import { View, WebView, Dimensions } from 'react-native'
const { width } = Dimensions.get('window');
export default class ChartView extends Component {
chartHTML() {
return `<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var ctx = document.getElementById("container").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
</script>
</head>
<body>
<canvas id="container" width="${width}" height="${width}" />
</body>
</html>`
}
render() {
const html = this.chartHTML();
return (
<View style={this.props.style}>
<WebView
style={{flex: 1, backgroundColor: 'transparent'}}
source={{ html: html, baseUrl: 'web/' }}
originWhitelist={['*']}
javaScriptEnabled
domStorageEnabled
scalesPageToFit
scrollEnabled={false}
automaticallyAdjustContentInsets
/>
</View>
)
}
}
render()では実質的にWebViewしかありません。そこでsourceプロパティにhtml文字列を渡します。中身はchartHTML()に書いてあります。
<body>の中に<canvas>が1個だけあり、<script>に描画内容が書いてあるという感じです。割と力技です。
中身はこちらのドキュメントのサンプルをそのまま転載しています。
で、画面はというと次のようになります。
タップ操作で自然に反応してくれるため思ったより使い勝手が良いです。
ただし、今のコードはCDNからライブラリを読むためネットワークが必要です。オフラインでも使えるようなアプリにする場合はライブラリのコードをなんとかしてアプリに入れておく必要があるので工夫が必要のはず。うまくいかない可能性もありそう。未検証です。
canvasに描画するようなタイプのライブラリを使いたいような場合には案外現実的な選択肢にしてもいいのではないかと個人的には思います。