试图为我的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根本对我没有帮助。

因此，总而言之，我希望axios getrequest对我的http数据，然后保存和排序此数据并在我的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("(hiddenhttps:/api/GewinnNachJahr").then(res => {
        this.messages = res.data;
        console.log(response.data);
        for (let [key, value] of Object.entries(response.data)) {
          this.labels.push(key);
          this.data_set.push(value);
        }
        this.$nextTick(function() {
          this.barChart.update();
        });

      });
    }
  }
});

for循环将键和值分开，然后将其推入数据数组。将所有内容推送到数组中后，只需使用this.barChart.update()

更新图表