ChartJS Vue JS设置组件中的数据收集

n1bvdmb6 于 2022-11-23 发布在 Chart.js

关注(0)|答案(2)|浏览(177)

我想让我的代码更短。我有图表js，它使用datacollection来设置图表的选项。我想在我的页面上使用它时在另一个组件中呈现它。
我希望能够根据我想要的图表，从组件渲染中设置Det数据收集。
在我组件中有这样的内容：

<template>
   <div>
     <chart :datacollection="this_will_i_define_on_the_page_i_render_this_component"> </chart>
   </div>
<template>

<script> 
  export {
    name: 'this-chart',
    data () { 
      return {
       DC1: []
       DC2: []
      }
    }
 }
 (basic vue component)
</script>

<template>
  <this-chart :datacollection="DC1"> </this-chart>
  <this-chart :datacollection="DC2"> </this-chart>
</template>

我希望能够在组件中设置datacollection，我该怎么做呢？
先谢谢你。

chart.js

来源：https://stackoverflow.com/questions/52111059/vue-js-setting-data-collection-in-component

2条答案

按热度按时间

yacmzcpb1#

然后根据你的评论，你可以这样做。可能更优雅的方式，但应该工作。

<template>
    <div>
        <chart :data-collection="myChartData"></chart>
    </div>
</template>

<script>
export default {
  name: "this-chart",
  props: {
    activeDataSet: {
      type: String,
      required: true,
      validator: value => ["a", "b", "c"].indexOf(value) > -1
    }
  },
  computed: {
    myChartData() {
      const example1 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      const example2 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      const example3 = [{ x: 1, y: 2 }, { x: 2, y: 3 },{ x: 3 y: 4 }];
      if(this.activeDataSet === 'a') return example1
      if(this.activeDataSet === 'b') return example2
      if(this.activeDataSet === 'c') return example3
    }
  }
};
</script>

然后使用

<template>
    <this-chart activeDataSet="a"></this-chart>
</template>

赞(0）回复(0）举报 2022-11-23

bqucvtff2#

我想你在找component props。

<template>
    <div>
        <chart :data-collection="myChartData"></chart>
    </div>
</template>

<script>
export default {
  name: "this-chart",
  props: {
    myChartData: {
      type: Array,
      required: true
    }
  }
};
</script>

而要使用它

<template>
    <this-chart :my-chart-data="exampleData"></this-chart>
</template>

<script>
export default {
  name: "example-component",
  data() {
    return {
      exampleData: [{ x: 5, y: 10 }, { x: 6, y: 11 }]
    };
  }
};
</script>

请下次更好地设置代码格式。

赞(0）回复(0）举报 2022-11-23

我来回答

ChartJS Vue JS设置组件中的数据收集

2条答案

相关问题

热门标签

最新问答