无法使用 canvas.js 在 react-native 中绘制折线图答案

【问题标题】：Unable to draw linechart in react-native using canvas.js无法使用 canvas.js 在 react-native 中绘制折线图
【发布时间】：2019-01-28 09:24:22
【问题描述】：

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

谢谢

【问题讨论】：

我自己解决了。。谢谢

标签： javascript reactjs html react-native facebook-canvas

【解决方案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>" }}    /> 
      );
      }
      }

【讨论】：