无法分配给g2.js中对象'[ Object ]‘的只读属性’构造函数‘

Question

我使用的是角11，我使用的是最新版本的@antv/g2和@antv/data-set包在角11中。

我不明白我为什么要遇到这个错误。请帮助我解决这一错误，并感谢提前。

下面是我所面对的错误图像。

误差图像

这是我的密码。

Dashboard.component.ts

    import { Chart } from '@antv/g2';
    var DataSet = require('@antv/data-set');
    

     ngAfterViewInit() {
        // TODO:
        const chart1 = this.genChart1();
        const chart2 = this.genChart2();
    
        // NOTE:
        this.settings.notice.subscribe(res => {
          chart1.forceFit();
          chart2.forceFit();
        });
      }
    
      // Line chart
      genChart1() {
        const data = [
          { date: '2019-6-24', indicator: 'UV', count: 7 },
          { date: '2019-6-24', indicator: 'Download', count: 3.9 },
          { date: '2019-6-25', indicator: 'UV', count: 6.9 },
          { date: '2019-6-25', indicator: 'Download', count: 4.2 },
          { date: '2019-6-26', indicator: 'UV', count: 9.5 },
          { date: '2019-6-26', indicator: 'Download', count: 5.7 },
          { date: '2019-6-27', indicator: 'UV', count: 14.5 },
          { date: '2019-6-27', indicator: 'Download', count: 8.5 },
          { date: '2019-6-28', indicator: 'UV', count: 18.4 },
          { date: '2019-6-28', indicator: 'Download', count: 11.9 },
          { date: '2019-6-29', indicator: 'UV', count: 21.5 },
          { date: '2019-6-29', indicator: 'Download', count: 15.2 },
          { date: '2019-6-30', indicator: 'UV', count: 25.2 },
          { date: '2019-6-30', indicator: 'Download', count: 17 },
          { date: '2019-7-1', indicator: 'UV', count: 26.5 },
          { date: '2019-7-1', indicator: 'Download', count: 16.6 },
          { date: '2019-7-2', indicator: 'UV', count: 23.3 },
          { date: '2019-7-2', indicator: 'Download', count: 14.2 },
          { date: '2019-7-3', indicator: 'UV', count: 18.3 },
          { date: '2019-7-3', indicator: 'Download', count: 10.3 },
          { date: '2019-7-4', indicator: 'UV', count: 13.9 },
          { date: '2019-7-4', indicator: 'Download', count: 6.6 },
          { date: '2019-7-5', indicator: 'UV', count: 9.6 },
          { date: '2019-7-5', indicator: 'Download', count: 4.8 },
        ];
    
        // const chart = new G2.Chart({
        const chart = new Chart({
          container: 'chart1',
          forceFit: true,
          height: 300,
          padding: [20, 20, 80, 50],
        });
        chart.source(data, {
          date: {
            alias: '',
            type: 'time',
            mask: 'MM-DD',
          },
        });
        chart.tooltip({
          crosshairs: {
            type: 'line',
          },
        });
        chart.axis('count', {
          label: {
            formatter: function formatter(val) {
              return val + 'K';
            },
          },
        });
        chart
          .line()
          .position('date*count')
          .color('indicator');
        chart
          .point()
          .position('date*count')
          .color('indicator')
          .size(4)
          .shape('circle')
          .style({
            stroke: '#fff',
            lineWidth: 1,
          });
        chart.render();
    
        return chart;
      }
      // Pie chart
      genChart2() {
        const text = ['MIDNIGHT', '3 AM', '6 AM', '9 AM', 'NOON', '3 PM', '6 PM', '9 PM'];
        const data = [];
        for (let i = 0; i < 24; i++) {
          const item: any = {};
          item.type = i + '';
          item.value = 10;
          data.push(item);
        }
    
        const DataView = DataSet.DataView;
        const dv = new DataView();
        dv.source(data).transform({
          type: 'percent',
          field: 'value',
          dimension: 'type',
          as: 'percent',
        });
    
        // const chart = new G2.Chart({
        const chart = new Chart({
          container: 'chart2',
          forceFit: true,
          height: 300,
          padding: 50,
        });
        chart.legend(false);
        chart.tooltip({
          showTitle: false,
        });
    
        const bgView: any = chart.view();
        bgView.coord('theta', {
          innerRadius: 0.9,
        });
        bgView.source(dv);
        bgView
          .intervalStack()
          .position('percent')
          .color('type', ['rgba(255, 255, 255, 0)'])
          .style({
            stroke: '#444',
            lineWidth: 1,
          })
          .tooltip(false)
          .select(false);
    
        bgView.guide().text({
          position: ['50%', '50%'],
          content: '24 hours',
          style: {
            lineHeight: '240px',
            fontSize: '30',
            fill: '#262626',
            textAlign: 'center',
          },
        });
    
        const intervalView = chart.view();
        intervalView.source(data);
        intervalView.coord('polar', {
          innerRadius: 0.9,
        });
        intervalView.axis(false);
        intervalView
          .interval()
          .position('type*value')
          .size('type', val => {
            if (val % 3 === 0) {
              return 4;
            } else {
              return 0;
            }
          })
          .color('#444')
          .tooltip(false)
          .label('type', val => {
            if (val % 3 === 0) {
              return text[val / 3];
            }
            return '';
          });
    
        const userData = [
          { type: 'A', value: 60 },
          { type: 'B', value: 10 },
          { type: 'C', value: 10 },
          { type: 'D', value: 40 },
          { type: 'E', value: 20 },
          { type: 'F', value: 10 },
          { type: 'G', value: 30 },
          { type: 'H', value: 30 },
        ];
        const userDv = new DataView();
        userDv.source(userData).transform({
          type: 'percent',
          field: 'value',
          dimension: 'type',
          as: 'percent',
        });
        const pieView = chart.view();
        pieView.source(userDv, {
          percent: {
            formatter: function formatter(val) {
              return (val * 100).toFixed(2) + '%';
            },
          },
        });
        pieView.coord('theta', {
          innerRadius: 0.75,
        });
        pieView
          .intervalStack()
          .position('percent')
          .color('type')
          .label('type', {
            offset: 40,
          })
          .select(false);
    
        chart.render();
    
        return chart;
      }

Dashboard.component.html

<div class="matero-row" fxLayout="row wrap">

  <!-- Charts -->
  <div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">
    <mat-card>
      <mat-card-subtitle>Traffic</mat-card-subtitle>
      <mat-card-content>
        <div id="chart1"></div>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="matero-col" fxFlex.gt-sm="40" fxFlex="100">
    <mat-card>
      <mat-card-subtitle>User Behavier</mat-card-subtitle>
      <mat-card-content>
        <div id="chart2"></div>
      </mat-card-content>
    </mat-card>
  </div>
</div>

请帮帮我。

Answer 1

您不能在这里指定构造函数：

const DataView = DataSet.DataView;
const dv = new DataView();

根据文档的说法：

const dv0 = new DataSet.DataView();