Vue+Plotly.js：如何按复选框选择拆分数据数组为两个数组

原代码存在的核心问题 #

1. 双层循环逻辑错误：每个复选框都遍历全部数据元素，导致newData/deletedLines会重复添加数据（比如3个复选框就会把每条数据重复推送3次），完全无法实现“仅展示选中对应数据”的需求。
2. 直接操作DOM不符合Vue开发规范：手动通过document.querySelectorAll获取复选框状态，违背了Vue响应式数据驱动的理念，容易引发状态不一致问题。
3. 冗余的toRaw调用：每次循环都调用toRaw(this.data)，可以缓存一次原始数据提升性能。

修正后的实现方案 #

步骤1：用Vue响应式绑定管理复选框状态

抛弃DOM操作，通过v-model将复选框选中状态绑定到Vue实例的数组中，确保状态与视图同步：

<template>
  <div>
    <!-- 假设每个复选框对应数据中的一个系列，用name作为标识 -->
    <div v-for="(item, idx) in data" :key="idx">
      <input 
        type="checkbox" 
        class="cluster"
        :value="item.name"
        v-model="selectedClusters"
      >
      <label>{{ item.name }}</label>
    </div>
    <div id="myDiv"></div>
  </div>
</template>

步骤2：编写数据拆分与图表更新逻辑

利用数组filter方法高效拆分数据，结合Vue的监听机制自动更新图表：

<script>
import Plotly from 'plotly.js-dist'
import { toRaw } from 'vue'

export default {
  data() {
    return {
      data: [], // 存储全部原始图表数据
      selectedClusters: [], // 存储选中的系列标识
      newData: [], // 需展示的数据
      deletedLines: [] // 不展示的数据
    }
  },
  mounted() {
    // 初始化默认全选
    this.selectedClusters = this.data.map(item => item.name)
    this.updateChart()
  },
  methods: {
    updateChart() {
      const rawData = toRaw(this.data)
      // 拆分数据：筛选选中的系列
      this.newData = rawData.filter(item => this.selectedClusters.includes(item.name))
      // 拆分数据：筛选未选中的系列
      this.deletedLines = rawData.filter(item => !this.selectedClusters.includes(item.name))
      // 更新Plotly图表
      Plotly.newPlot('myDiv', this.newData)
    }
  },
  watch: {
    // 监听选中状态变化，自动更新图表
    selectedClusters: {
      handler() {
        this.updateChart()
      },
      deep: true
    }
  }
}
</script>

适配不同筛选场景 #

如果你的复选框是按分类维度筛选（比如多个数据元素属于同一个分类），只需调整filter的判断条件即可：

// 假设数据元素包含clusterId属性，复选框value为clusterId
this.newData = rawData.filter(item => this.selectedClusters.includes(item.clusterId))
this.deletedLines = rawData.filter(item => !this.selectedClusters.includes(item.clusterId))

内容的提问来源于stack exchange，提问作者Emine