無法使用canvas.js在react-native中繪制折線圖

Question

我在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>" }}
            />
        );
    }
}

謝謝

Answer 1

使用此代碼。

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>" }}    /> 
      );
      }
      }