Невозможно нарисовать линейную диаграмму в реагирующем с использованием canvas.js - PullRequest
Новая
       122

Невозможно нарисовать линейную диаграмму в реагирующем с использованием canvas.js

0 голосов
/ 28 января 2019

Здесь я использую WebView в реактивно-родном для рисования линейной диаграммы в реактивно-родном, но его нет ... ниже приведен полный код .. 

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

Спасибо

1 Ответ

0 голосов
/ 28 января 2019

Используйте этот код .. 

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