Question

师父好！我是编程新手，现在正在开发vue.js仪表板。目前，我正在VueJs中实现amChart来填充仪表板，但遇到了 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。谢谢你

Uncaught TypeError：无法读取vueJs中未定义的属性“ length”（AmChart实现）

0 个答案: