在 vuejs 中显示图表？

Question

我正在使用 vuejs 制作图表，通过 laravel API 获取数据。

  data() {
  return {
    startDate: '',
    endDate: '',
    data: {
          labels: [1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020],
          datasets: [{
          data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
          label: 'User Active',
          borderColor: '#3e95cd'
          }
         ]
        },
   options: {
     title: {
       display: true,
       text: 'Report user'
     },
     }
    },
    created() {
       axios
          .get("/project/api/user")
          .then((res) => {
            console.log(res.data); //Result {"datasets":[{"label":"User active","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}],"labels":["2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12","2021-09-13","2021-09-14"]};
          })
    },
    methods: {
       changevalue() {
         axios
          .get("/project/api/user", {
            params: {
              startDate: this.startDate,
              endDate: this.endDate
           } 
          })
          .then((res) => {
            console.log(res.data);
          })
     }
    }

模板：

<chartjs-component-line-chart
      :data="data"
      :options="options"
      :plugins="plugins"
    />

现在我想获取created() 中的res.data 数据，而不是data() 中的默认数据。

我有一个开始和结束日期可供选择，还有一个提交按钮。 我希望当我选择开始和结束日期并单击提交时，图表数据将再次更新

          <b-form-group>
              <label>Start date:</label>
              <b-form-datepicker
                v-model="startDate"
                :value="startDate"
                :date-format-options="{
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                }"
              />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="4" class="mb-md-0 mb-2">
            <b-form-group>
              <label>End date:</label>
              <b-form-datepicker
                v-model="endDate"
                :value="endDate"
                :date-format-options="{
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                }"
              />
            </b-form-group>

             <b-button
                variant="primary"
                class="btn-tour-finish"
                @click="changevalue"
              >

请帮助我。其实我还没有找到解决办法。我也是一个 Vuejs 新手，所以这对我来说真的很难。我已经做了2天了，它仍然不起作用。谢谢。

Answer 1

您的所有代码看起来都是正确的。看起来您的最后一步是将 API 中的数据设置到图表中：

created() {
   axios
      .get("/project/api/user")
      .then((res) => {
        this.data = res.data.datasets[0].data
}

在您的 changevalue() 方法中相同：

changevalue() {
     axios
      .get("/project/api/user", {
        params: {
          startDate: this.startDate,
          endDate: this.endDate
       } 
      })
      .then((res) => {
        this.data = res.data.datasets[0].data
      })
 }

Answer 2

我已经解决了这个问题..我想和你分享。可以帮助像我这样的新手：

data() {
  return {
    startDate: '',
    endDate: '',
    loaded: false,
    data: {
          labels: null,
          datasets: null,
        },
   options: {
     title: {
       display: true,
       text: 'Report user'
     },
     }
    },
    created() {
       this.loaded = false;
       axios
          .get("/project/api/user")
          .then((res) => {
            console.log(res.data); //Result {"datasets":[{"label":"User active","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}],"labels":["2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12","2021-09-13","2021-09-14"]};

          //handle code
          var result = JSON.parse(res.data);
          this.data.labels = result.labels;
          this.data.datasets = result.datasets;
          this.loaded = true;
          })
    },
    methods: {
       changevalue() {
         this.loaded = false;
         axios
          .get("/project/api/user", {
            params: {
              startDate: this.startDate,
              endDate: this.endDate
           } 
          })
          .then((res) => {
            var result = JSON.parse(res.data);
            this.data.labels = result.labels;
            this.data.datasets = result.datasets;
            this.loaded = true
          })
     }
    }





<chartjs-component-line-chart
      v-if="loaded"
      :data="data"
      :options="options"
      :plugins="plugins"
    />

文档：enter link description here