laravel - 单击部分饼图的一部分时，我有什么方法可以过滤表中的数据？拉拉维尔

Question

我已经为图表实现了点击事件，它可以过滤表格中的数据。但是现在我面临的问题是在图表外单击时数据不会返回表中的所有数据。如何使它在区域图外单击时返回所有数据？谢谢你。任何帮助将不胜感激。

<script>
import VueApexCharts from "vue-apexcharts";
import faker from "faker";
export default {
  components: {
    VueApexCharts,
  },
  data() {
    return {
      Lists: [],
      selectedData:{},
      search1:'',
      clicked:'',
      clicked1:'',
       isLoading1:true,
      currentPage: 1,
      series: [300, 200, 49, 100,290, 228, 119, 55],
      chartOptions: {
        colors: ['#7961F9', '#FF9F43', '#196EB0', '#2EAB56','#df87f2','#057FF2', '#14DA6E','#FF5500'],
        legend: {
          fontSize: "14px",
          position: "top",
        },
          dataLabels: {
              enabled: true,
              minAngleToShowLabel: 0,
              distributed: false,
              style: {
                colors: ['#111'],
              },
              background: {
                enabled: true,
                foreColor: '#fff',
                borderWidth: 0,
              }
            },
        chart: {
          width: 500,
    type: 'pie',
          events: {
            legendClick: (chartContext, seriesIndex,w, config) => {
              this.clicked = w.config.labels[seriesIndex];
              console.log(this.clicked);
              console.log(seriesIndex);
            },
            dataPointSelection: (event,chartContext,config) => {
            this.clicked1 = config.w.config.labels[config.dataPointIndex];
            console.log(this.clicked1);
            },
         },
        },
        labels: ['Private', 'Local','Dental', 'Government','Cyber Security', 'Health', 'Foreign','Medical'],
        responsive: [
          {
            breakpoint: 480,
            options: {
              legend: {
                position: "bottom",
                fontSize: "12px",
              },
            },
          },
        ],
      },
        }
      },
    created() {
    this.getData();
      this.getData1();
  },
  computed:{
    filterLists(){
      let list =  this.Lists;
      if(this.search1 !=''){
      list =  list.filter((tr)=>{
        return tr.agency.toUpperCase().includes(this.search1.toUpperCase())
      });
    }
    if (this.clicked !=''&& this.clicked){
        list =  list.filter((tr)=>{
         return tr.projectCategory.toUpperCase().includes(this.clicked.toUpperCase())
      });
      }
        if (this.clicked1 !=''&& this.clicked1){
        list =  list.filter((tr)=>{
         return tr.projectCategory.toUpperCase().includes(this.clicked1.toUpperCase())
      });
      }
    return list;
    },
},

 methods: {
    next(page) {},
    getData1() {
        this.isLoading1 = true;
        for (let i = 0; i < this.randInt(8, 4); i++) {
        let index = Math.floor(Math.random() * 2);
        let projectCategory = this.rotate([
          'Private', 'Local','Dental', 'Government','Cyber Security', 'Health', 'Foreign','Medical'
        ]);
 
        this.Lists.push({
          projectCategory:projectCategory,
          project_name: faker.company.catchPhrase(),
          agency: faker.company.companyName(),
          logo: faker.image.abstract(),
        });
      
           }
      this.maxPage = 2;
      this.isLoading1 = false;
    },

       next1(page) {
      if (page == -2) {
        this.currentPage = 1;
      } else if (page == -3) {
        this.currentPage = this.maxPage;
      } else {
        if (
          this.currentPage + page < 1 ||
          this.currentPage + page > this.maxPage
        ) {
          return;
        }
        this.currentPage += page;
      }

      this.showLoader("#card-list");
       this.Lists = [];
      this.isLoading1 = true;

      setTimeout(() => {
        this.closeLoader("#card-list");
        this.getData1();
      }, 1500);
    },
   
  },
};
</script>

<style>
#card > header{
  padding: 1.5rem 2rem;
  background-color: #2E3839;
}

#card{
--tw-bg-opacity: 1;
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}
.con-img.vs-avatar--con-img img {
  object-fit: cover !important;
}

.apexcharts-toolbar {
  position:absolute; 
  margin-right:12px;
}
vs-button.btn:hover{
  background-color: rgba(255,255,255,0);
  cursor: pointer;
}
</style>

<template>
  <div class="mb-base">
    <div class="vx-row mb-base">
    <div class="vx-col 2/3 w-full mb-base">
        <vs-card
          id="card"
          class="vs-con-loading__container h-full"
        > 
        <template slot="header">
          <div class="flex">
            <div>
              <img
                src=""
                alt="Info"
                class="h-12 inline-block mr-4 object-scale-down"
              />
            </div>
            <div class="flex flex-col justify-center w-full text-start">
              <h3 class="text-white">Source of Fund</h3>
              <span class="text-sm text-white">Based on Total Billed (Yearly)</span>
            </div>
            <div>
            </div>
          </div>
        </template>
          <div class="flex flex-wrap mt-2">
            <div class="lg:w-1/3 w-full">
          <vue-apex-charts
          type="donut"
          :options="chartOptions"
          :series="series"
          width="100%"
          class="items-center justify-center flex mt-16 content-center"
         
          />
            </div>
            <div class="lg:w-2/3 w-full lg:pl-6 pl-0 mt-6">
              <div class="flex justify-end items-end">
                <vx-input-group class="mb-base lg:w-1/2 w-full">
                  <template slot="append">
                     <div class="append-text btn-addon">
                    <vs-button color="#A9A9A9"><i class="fas fa-search"></i></vs-button>
                  </div>
                  </template>
                  <vs-input
                    v-model="search1"
                    placeholder="Project Code or name"
                  />
                </vx-input-group>
              </div>
              <div id="card-list"> 
              <vs-list v-if="!isLoading1">
                <vs-list-item
                  v-for="(tr, index) in filtertLists"
                  :key="index"
                  class="hover:shadow cursor-pointer text-base mb-4"
                >
                  <template slot="title">
                   <div
                    class="flex flex-col ml-2 cursor-pointer"
                  >
                   
                      <div class="font-bold">{{ tr.project_name }}</div>
                      <div>{{ tr.agency }}</div>
                    </div>
                  </template>

                  <template slot="avatar">
                    <vs-avatar :src="tr.logo"></vs-avatar>
                  </template>
                  {{ tr.projectCategory }}
                </vs-list-item>
                 <div v-if="!filterLists.length" class="flex">
            <div class="items-center justify-center text-lg font-bold">No record...</div>
          </div>
          </vs-list>
              <div v-else class="flex">
            <div class="items-center justify-center">Fetching data...</div>
           </div>
          </div>
              <div class="flex justify-end gap-4">
                <div class="flex items-center justify-center text-sm">
                  Page {{ currentPage }} of
                  {{ maxPage }}
                </div>
                <div>
                  <vs-button
                    type="filled"
                    color=" rgba(243, 244, 246)"
                    class="w-10 mr-2 rounded-md bg-gray-400 text-black btn hover:text-black"
                    @click="next1(-1)"
                  >
                    <i class="fas fa-chevron-left"></i>
                  </vs-button>
                  <vs-button
                    type="filled"
                    color=" rgba(243, 244, 246)"
                    class="w-10 mr-2 rounded-md bg-gray-400 text-black btn"
                    @click="next1(1)"
                  >
                    <i class="fas fa-chevron-right"></i>
                  </vs-button>
                </div>
              </div>
            </div>
          </div>
        </vs-card>
      </div>
    
      
    </div>
  </div>
</template>

我正在使用 laravel vue 饼图。单击饼图元素时，有什么方法可以过滤表格中的数据。例如，当单击部分饼图时，表格将被过滤并显示该部分下表格中的数据..任何帮助将不胜感激

标签： laravelvue.js

Answer 1

由于您提供的细节很少，因此无法直接指出解决方案。我仍然会尝试解释逻辑。在此过程中，您将从使用 Vue.js 的屏幕获得输入，并且您将操作显示在 Vue.js 上的数据。

所以首先；您需要知道您点击了饼图的哪一部分。我假设您在项目中使用的饼图有一些在您与图表交互时触发的事件。您将侦听该事件并捕获单击项目的值。

现在你有了点击项目的价值，你需要得到filter你的结果。

为此，您可以使用 Vue.js Computed Properties 和 Watchers：https ://vuejs.org/v2/guide/computed.html

假设您在 Vue.js 应用程序中有数据：

data () {
  return {
    clickedItem: null,
    itemsOnTable: [ ... ]
  }
}

您拥有所有表格内容itemsOnTable和选定项目的数据clickedItem

您可以使用computed过滤数据：

data () {
  return {
    clickedItem: null,
    itemsOnTable: [ ... ]
  }
},
computed: {
  //  filter itemsOnTable if clickedItem have any value
  filteredItems: function () {
    if(this.clickedItem==null) return this.itemsOnTable;
    return this.itemsOnTable.filter(item => item.column = this.clickedItem);
  }
}

现在在您的 Vue.js 组件中，您可以直接filteredItems用于表格元素v-for

<table>
    <tr v-for="items in filteredItems">
        <td>{{ item.column }}</td>
        <!-- other columns -->
    </tr>
</table>

此示例解释了交互和计算属性的基础知识，旨在帮助您理解基础知识。