Uncaught TypeError: Невозможно прочитать свойство 'length' с неопределенным значением в vueJs (реализация AmChart) - PullRequest
Новая
       7

Uncaught TypeError: Невозможно прочитать свойство 'length' с неопределенным значением в vueJs (реализация AmChart)

0 голосов
/ 02 ноября 2018

Добрый день, Мастер! Я новичок в программировании, и сейчас я работаю над созданием панели инструментов vue.js. В настоящее время я внедряю amChart в VueJs для заполнения панели инструментов, но обнаружил ошибку Uncaught TypeError: Невозможно прочитать свойство 'length' из неопределенного , поэтому значение не отображается в диаграмме. Код как ниже:

HTML: 

    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <v-flex lg8>
          <v-card> 
            <div 
              id="chartdiv" 
              style="width: 100%; height: 400px;"              
              ></div>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>

Сценарий: 

data: () => ({
    transactions: []
  }),
methods: {
    getDataChart() {
      api.getTransactions(
        {},
        this.getTransactionsSuccessCallback,
        this.getTransactionsErrorCallback
      );
    },
    getTransactionsSuccessCallback(response) {
      console.log(response);

      for (let i = 0; i < response.data.items.length; i++) {
        let item = response.data.items[i];
        console.log(item);
        var dataChart = {
          transaction_date: new Date(item.transaction_date),
          debit_amount: item.debit_amount
        };

        this.transactions.push(dataChart);
      }
      console.log(this.transactions);
    },
    getTransactionsErrorCallback(error) {
      console.log(error);
    }
  },
  mounted() {
    this.getDataChart();
  },

а это мой скрипт AmChart 

created(transactions) {
    chart = AmCharts.makeChart("chartdiv", {
      type: "serial",
      theme: "dark",
      marginRight: 40,
      marginLeft: 40,
      autoMarginOffset: 20,
      dataDateFormat: "YYYY-MM-DD",
      dataProvider: transactions,
      valueAxes: [
        {
          id: "v1",
          axisAlpha: 0,
          position: "left",
          ignoreAxisWidth: true
        }
      ],
      balloon: {
        borderThickness: 1,
        shadowAlpha: 0
      },
      graphs: [
        {
          id: "g1",
          balloon: {
            drop: true,
            adjustBorderColor: false,
            color: "#ffffff",
            type: "smoothedLine"
          },
          fillAlphas: 0.2,
          bullet: "round",
          bulletBorderAlpha: 1,
          bulletColor: "#FFFFFF",
          bulletSize: 5,
          hideBulletsCount: 50,
          lineThickness: 2,
          title: "red line",
          useLineColorForBulletBorder: true,
          valueField: "debit_amount",
          balloonText: "<span style='font-size:18px;'>[[debit_amount]]</span>"
        }
      ],
      chartCursor: {
        valueLineEnabled: true,
        valueLineBalloonEnabled: true,
        cursorAlpha: 0,
        zoomable: false,
        valueZoomable: true,
        valueLineAlpha: 0.5
      },
      valueScrollbar: {
        autoGridCount: true,
        color: "#000000",
        scrollbarHeight: 50
      },
      categoryField: "transaction_date",
      categoryAxis: {
        minPeriod: "mm",
        parseDates: true,
        dashLength: 1,
        minorGridEnabled: true
      },
      export: {
        enabled: true
      }
    });

Кто-нибудь может мне помочь с этой проблемой? Потому что я все еще нуб в программировании: D. Спасибо, прежде чем

...