嘗試為我的 chartjs 和 googlecharts 使用 axios、vuejs 和一個虛擬 api（僅獲取請求）

Question

我正在嘗試將 axios 與包含此數據的鏈接結合使用：{ "2015": 226, "2016": 152, "2017": 259, "2018": 265, "2019": 275}，用 JSON 編寫.

我想實現這些數據，例如年份：2017 和收入：這張圖表中的 259：

//BARCHART
var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["2016", "2017", "2018", "2019", "2020"],
    datasets: [
      {
        label: 'Vergangenheit', //Vergangenheit = Past
        data: [226, 152, 259, 265, 0],
        backgroundColor: 'rgba(110, 205, 126, 1)',
        borderColor: 'rgba(110, 205, 126, 1)',
        borderWidth: 1,
      }
    ]
  },

  options: {
    responsive: true,
    responsiveAnimationDuration: 0,
    maintainAspectRatio: true,
    aspectRatio: 2,
    oneResie: null,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

});

結合 vue 和 axios，一個 get 請求應該是這樣的：

var vm = new Vue({
  el: '#get',
  data: {
    messages: [],
    message: ""
},
mounted: function () {
    this.getMessages(); // get all messages automatically when the page is loaded
},
methods: {
    getMessages: function() {
        axios.get('(hiddenhttps:/api/GewinnNachJahr')
            .then( (res) => {
                this.messages = res.data;
                console.log(response.data)
            })
    },
}
});

我不希望為獲取請求按下任何按鈕，它應該在重新加載頁面時始終獲取該數據。 我已經嘗試了 stackoverflow 中的一些代碼片段，官方的 axios github 根本沒有幫助我。

總而言之，我希望在我的 http 數據上使用 axios getrequest，然后保存和排序這些數據並在我的 chart.js 條形圖中實現它。 我認為僅使用我的 java.js 就足夠了。

對於所涉及的時間和精力，我深表歉意。 先感謝您。

Answer 1

在這種情況下， mounted或created是實現引導邏輯的正確位置。 但是，您的代碼在定義和拼寫錯誤方面存在一些問題：

• '(hiddenhttps:/api/GewinnNachJahr' : 應該省略初始括號
• console.log(response.data) ： response應該成為匹配回調參數的res 。

查看一個帶有虛擬 api 調用的工作示例以及它如何加載數據：

 var vm = new Vue({ el: '#app', data: { messages: [], message: "" }, mounted() { this.getMessages(); // get all messages automatically when the page is loaded }, methods: { getMessages() { axios.get('http://dummy.restapiexample.com/api/v1/employees') .then((res) => { this.messages = res.data; console.log(res.data) }) }, } });

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li v-for="m in messages">{{JSON.stringify(m)}}</li> </ul> </div>

Answer 2

你可以在你的 vue 應用中實現 chart.js。 我已經創建了它應該可以工作的代碼。

   var vm = new Vue({
  el: "#get",
  data: {
    messages: [],
    message: "",
    labels: [],
    data_set: [],
    barChart: ""
  },
  mounted: function() {
    var ctx = document.getElementById("myChart");
    this.barChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: this.labels,
        datasets: [
          {
            label: "Vergangenheit", //Vergangenheit = Past
            data: this.data_set,
            backgroundColor: "rgba(110, 205, 126, 1)",
            borderColor: "rgba(110, 205, 126, 1)",
            borderWidth: 1
          }
        ]
      },

      options: {
        responsive: true,
        responsiveAnimationDuration: 0,
        maintainAspectRatio: true,
        aspectRatio: 2,
        oneResie: null,
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  },
  created: function() {
    this.getMessages(); // get all messages automatically when the page is loaded
  },
  methods: {
    getMessages: function() {

      axios
        .get(
          "https://webenggroup06ln3.free.beeceptor.com/zalando/api/GewinnNachJahr"
        )
        .then(res => {
          console.log(res.data);
          for (let [key, value] of Object.entries(res.data)) {
            this.labels.push(key);
            this.data_set.push(value);
          }
          this.$nextTick(function() {
            this.barChart.update();
          });
        });
    }
  }
});

for循環將您的鍵和值分開，然后將其推送到數據數組中。 將所有內容推入數組后，圖表只需要使用this.barChart.update()更新