Question

我正在尝试使用chartist.js遍历甜甜圈图的标签数组，但我无法弄清楚chartist.js是否可以将标签放在侧面而不是甜甜圈图内部。我想在v-for呈现的每个元素上传递不同的css类，以便可以将相同颜色的甜甜圈图放入其corespondent标签中。因此，如果图表中x的值是蓝色，则我希望x的标签具有蓝色的项目符号点。

    <v-flex sm-6 style="margin-top: 15px;">
      <v-layout v-for="(item, index) in labelsAndValuesPieChart.labels" :key="index">

//这是我的“项目符号，我想在每次迭代中更改颜色

        <v-flex>
          <span class="dot"></span>
        </v-flex>
        <v-flex>
          <span class="pie-chart-label">{{item}}</span>
        </v-flex>
      </v-layout>
    </v-flex>

Answer 1

根据您在问题下留下的评论，您只需要生成类似于ct-series-b的类即可。

在这种情况下，您可以创建一个存储所有字母的数组（用于索引到字母的转换）。数组的索引将与item的索引匹配；

let alphabet = ['a', 'b', 'c', 'd', 'e'] // ...

methods: {
  getClass: function(index){
    return 'ct-series-' + alphabet[index];
  }
}

<v-flex>
   <span class="pie-chart-label" :class="getClass(index)">{{item}}</span>
</v-flex>

如何使用v-for在每个元素中呈现不同的CSS类

1 个答案: