Question

在我的vue应用程序（ vue-chartjs ）中，一页上有多个图表。我要实现的是，通过单击画布外部的单个按钮，我需要更改图表视图。就像单击标签一样，我们可以隐藏一个图例，然后再次单击该标签可以显示该图例。

就我而言，我有一个管理页面。我确实有两种来自用户的付款方式。一种是打电话，另一种是贴纸。假设如果我在该部分中有3个用户，将有3个图形。标签会像

通话
贴纸

当我单击每个图形中的标签时，它仅显示单击的图形。 那很好用。但是我需要实现的是在画布外部有两个按钮，即

显示来电
显示贴纸

在点击 显示通话 时，我只需要为所有三个图形显示通话标签。反之亦然。

更新1

这是我创建的一个示例。

放在顶部的两个按钮现在是静态的，应该是动态的。它应该来自下图的标签图例。并且颜色应与grpah标签的颜色相同。现在单击注册标签，它隐藏了曲线的图形。但是，当我单击“注册”按钮时，我需要隐藏3个图形中的所有标签图

我的节目表.vue

<template>
          <chart :chart-data="datacollection" :styles="myStyles"></chart>
</template>
<script>
import Chart from "./../Chart.js";
export default {
  components: {
    Chart
  },
  data() {
    return {
      datacollection: null
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Registrations",
            backgroundColor: "#42b983",
            data: [70, 20, 12, 39, 100, 40, 95, 80, 80, 20, 12, 101]
          },
          {
            label: "Incomes",
            backgroundColor: "#7952b3",
            data: [205, 408, 188, 190, 58, 200, 190, 400, 164, 254, 290, 201]
          }
        ]
      };
    },
  },
 computed: {
myStyles () {
  return {
    height: `500px`,
    width: `350px`,
  }
}
 }
  };
</script>
<style>
</style>

我的app.vue包含

    <b-button variant="success">Registrations</b-button>

    <b-button variant="success">Incomes</b-button>

    <b-container class="bv-example-row">
      <b-row>
        <b-col>
         <visualisation></visualisation>
        </b-col>
        <b-col>
          <visualisation></visualisation>
        </b-col>
        <b-col>
          <visualisation></visualisation>
        </b-col>
      </b-row>
    </b-container>

使用Vuechart中的画布外的自定义按钮过滤图例

0 个答案: