无法使用 canvas.js 在 react-native 中绘制折线图
Unable to draw linechart in react-native using canvas.js
这里我是用react-native中的WebView在react-native中画折线图,但是没有出现。下面是完整代码..
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SensorDetails extends Component {
render() {
return (
<WebView
source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){ var chart = new CanvasJS.Chart(chartContainer{title:{text: Earthquakes - per month}, data: [{type: line,dataPoints: [{ x: new Date(2012, 00, 1), y: 450 },{ x: new Date(2012, 01, 1), y: 414 },{ x: new Date(2012, 02, 1), y: 520 },{ x: new Date(2012, 03, 1), y: 460 },{ x: new Date(2012, 04, 1), y: 450 },{ x: new Date(2012, 05, 1), y: 500 },{ x: new Date(2012, 06, 1), y: 480 },{ x: new Date(2012, 07, 1), y: 480 },{ x: new Date(2012, 08, 1), y: 410 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }}
/>
);
}
}
谢谢
使用此代码..
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SensorDetails extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){var chart=new CanvasJS.Chart(chartContainer,{title:{text: 'Abhigyan Data'}, data: [{type: 'pie',dataPoints: [{ x: new Date(2012, 00, 1), y: 450 },{ x: new Date(2012, 01, 1), y: 414 },{ x: new Date(2012, 02, 1), y: 520 },{ x: new Date(2012, 03, 1), y: 460 },{ x: new Date(2012, 04, 1), y: 450 },{ x: new Date(2012, 05, 1), y: 500 },{ x: new Date(2012, 06, 1), y: 480 },{ x: new Date(2012, 07, 1), y: 480 },{ x: new Date(2012, 08, 1), y: 410 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }} />
);
}
}
这里我是用react-native中的WebView在react-native中画折线图,但是没有出现。下面是完整代码..
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SensorDetails extends Component {
render() {
return (
<WebView
source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){ var chart = new CanvasJS.Chart(chartContainer{title:{text: Earthquakes - per month}, data: [{type: line,dataPoints: [{ x: new Date(2012, 00, 1), y: 450 },{ x: new Date(2012, 01, 1), y: 414 },{ x: new Date(2012, 02, 1), y: 520 },{ x: new Date(2012, 03, 1), y: 460 },{ x: new Date(2012, 04, 1), y: 450 },{ x: new Date(2012, 05, 1), y: 500 },{ x: new Date(2012, 06, 1), y: 480 },{ x: new Date(2012, 07, 1), y: 480 },{ x: new Date(2012, 08, 1), y: 410 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }}
/>
);
}
}
谢谢
使用此代码..
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SensorDetails extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){var chart=new CanvasJS.Chart(chartContainer,{title:{text: 'Abhigyan Data'}, data: [{type: 'pie',dataPoints: [{ x: new Date(2012, 00, 1), y: 450 },{ x: new Date(2012, 01, 1), y: 414 },{ x: new Date(2012, 02, 1), y: 520 },{ x: new Date(2012, 03, 1), y: 460 },{ x: new Date(2012, 04, 1), y: 450 },{ x: new Date(2012, 05, 1), y: 500 },{ x: new Date(2012, 06, 1), y: 480 },{ x: new Date(2012, 07, 1), y: 480 },{ x: new Date(2012, 08, 1), y: 410 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }} />
);
}
}