• react项目导入@antv/g2的TypeError: Cannot read property 'appendChild' of null问题解决


    这个问题起因是因为id为c11的div标签不存在导致的,在g2画图之前,div并未渲染

     1 import React from 'react';
     2 import ReactDOM from 'react-dom';
     3 import './index.css';
     4 import { Chart } from '@antv/g2';
     5 
     6 ReactDOM.render(
     7   <React.StrictMode>
     8     <div id="c11"></div>
     9   </React.StrictMode>,
    10   document.getElementById('root')
    11 );
    12 
    13 const data = [
    14     { year: '1951 年', sales: 38 },
    15     { year: '1952 年', sales: 52 },
    16     { year: '1956 年', sales: 61 },
    17     { year: '1957 年', sales: 145 },
    18     { year: '1958 年', sales: 48 },
    19     { year: '1959 年', sales: 38 },
    20     { year: '1960 年', sales: 38 },
    21     { year: '1962 年', sales: 38 },
    22 ];
    23 const chart = new Chart({
    24     container: 'c11',
    25     autoFit: false,
    26      400,
    27     height: 300,
    28 });
    29 
    30 chart.data(data);
    31 chart.scale('sales', {
    32     ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
    33     formatter: (val) => `¥${val}`,
    34 });
    35 
    36 chart.axis('sales', {
    37     title: {},
    38 });
    39 
    40 chart.interval().position('year*sales');
    41 
    42 chart.render();

    把g2代码写在ReactDom后面就可以解决这个问题,这时候c11已经渲染完了

  • 相关阅读:
    C#double类型转换string类型
    数据分析测试
    第三周进度
    质量属性战术——可用性战术
    开学第二周进度报告
    开学第一周进度报告
    质量属性的六个常见属性场景
    架构漫谈有感03
    架构漫谈有感02
    读架构漫谈有感--软件架构师如何工作
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/13686576.html
Copyright © 2020-2023  润新知