如何在chart.js中对重复标签进行分组以创建没有重复的标签 [英] how to group duplicate labels in order to create a label without duplicates in chart.js

问题描述

我似乎无法解决这个问题:我的标签给我发回了清单，我想在我的例子中只有 HOME40、HOME60 和 PRO 作为标签，但不幸的是它返回了它的串联，我也想换颜色，如果产品是HOME40那么颜色必须是绿色，如果是PRO那么红色.有人有什么建议吗?

<div class="trendmensuel"><canvas id="trendmensuel"></canvas>

<脚本>var 趋势Mensuel = [{ produit: "HOME40Z", mois: "Janvier", effectif: 6, bgColor: "red";},{ produit: "HOME60", mois: "Janvier", effectif: 7, bgColor: "green";},{ produit: "HOME40Z", mois: "Février", effectif: 6, bgColor: "red";},{ produit: "PRO", mois: "Fevrier", effectif: 9, bgColor: "blue";},{ produit: "HOME60", mois: "Mars", effectif: 3, bgColor: "green";},];var label_trendMensuel = TrendMensuel.map(function(e){返回 e.mois;});var produit_trendMensuel = TrendMensuel.map(function(e){退回电子产品；});var effectif_trendMensuel = TrendMensuel.map(function(e){返回 e.effectif;});;var ctx = document.getElementById(trendmensuel");var chart = new Chart(ctx, {类型:酒吧"，数据 : {标签 : label_trendMensuel,//ito efa mety数据集:[{类型:酒吧"，backgroundColor: "rgba(54, 162, 235, 0.2)",borderColor: "rgba(54, 162, 235, 1)",边框宽度:1，标签:produit_trendMensuel，数据: effectif_trendMensuel，},],},});

解决方案

这是您想要的吗?

var TrendMensuel = [{ produit: "HOME40Z", mois: "Janvier", effectif: 6, bgColor: "red" },{ produit: "HOME60", mois: "Janvier", effectif: 7, bgColor: "green" },{ produit: "PRO", mois: "Janvier", effectif: 9, bgColor: "blue" },{ produit: "HOME40Z", mois: "Février", effectif: 3, bgColor: "red" },{ produit: "HOME60", mois: "Février", effectif: 4, bgColor: "green" },{ produit: "PRO", mois: "Février", effectif: 1, bgColor: "blue" },];const 数据 = 趋势Mensuel.reduce((a, b) =>{const i = a.months.findIndex(x => x === b.mois);const j = a.products.findIndex(y => y.label === b.produit);如果(我 === -1){a.months.push(b.mois);}如果(j === -1){a.products.push({类型:酒吧"，背景颜色:b.bgColor，borderColor: "rgba(54, 162, 235, 1)",边框宽度:1，标签: b. 产品，数据:[b.effectif]，});} 别的 {a.products[j].data.push(b.effectif);}返回一个；},{ 月份:[]，产品:[]});var ctx = document.getElementById("trendmensuel").getContext("2d");var chart = new Chart(ctx, {类型:酒吧"，数据: {标签:data.months,//ito efa mety数据集:data.products，},});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script><canvas id="trendmensuel" width="400" height="400"></canvas>

I can't seem to solve this problem: my label sends me back lists, I would like in my case here to have only HOME40, HOME60 and PRO as label, but unfortunately it returns the concatenation of that, I would also like to change color, if the product is HOME40 then the color must be green, if PRO then red. anyone have any suggestions?

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div class="trendmensuel">
    <canvas id="trendmensuel"></canvas>
</div>

<script>
       var trendMensuel = [ 
  { produit: "HOME40Z", mois: "Janvier", effectif: 6, bgColor: "red" },
  { produit: "HOME60", mois: "Janvier", effectif: 7, bgColor: "green" },

  { produit: "HOME40Z", mois: "Février", effectif: 6, bgColor: "red" },
  { produit: "PRO", mois: "Fevrier", effectif: 9, bgColor: "blue" },

  { produit: "HOME60", mois: "Mars", effectif: 3, bgColor: "green" },
];


   var label_trendMensuel = trendMensuel.map(function(e){
    return e.mois;
   });

   var produit_trendMensuel = trendMensuel.map(function(e){
    return e.produit;
   });

   var effectif_trendMensuel = trendMensuel.map(function(e){
    return e.effectif;
   });;

var ctx = document.getElementById("trendmensuel");
var chart = new Chart(ctx, {
   type :"bar",
   data : {
     labels : label_trendMensuel, // ito efa mety
     datasets:[
     {
        type: "bar",
        backgroundColor: "rgba(54, 162, 235, 0.2)",
        borderColor: "rgba(54, 162, 235, 1)",
        borderWidth: 1,
        label: produit_trendMensuel,
        data: effectif_trendMensuel,
     },],
   },

   });

</script>

解决方案

Is this what you want?

var trendMensuel = [
  { produit: "HOME40Z", mois: "Janvier", effectif: 6, bgColor: "red" },
  { produit: "HOME60", mois: "Janvier", effectif: 7, bgColor: "green" },
  { produit: "PRO", mois: "Janvier", effectif: 9, bgColor: "blue" },
  { produit: "HOME40Z", mois: "Février", effectif: 3, bgColor: "red" },
  { produit: "HOME60", mois: "Février", effectif: 4, bgColor: "green" },
  { produit: "PRO", mois: "Février", effectif: 1, bgColor: "blue" },
];

const data = trendMensuel.reduce(
  (a, b) => {
    const i = a.months.findIndex(x => x === b.mois);
    const j = a.products.findIndex(y => y.label === b.produit);

    if (i === -1) {
      a.months.push(b.mois);
    }

    if (j === -1) {
      a.products.push({
        type: "bar",
        backgroundColor: b.bgColor,
        borderColor: "rgba(54, 162, 235, 1)",
        borderWidth: 1,
        label: b.produit,
        data: [b.effectif],
      });
    } else {
      a.products[j].data.push(b.effectif);
    }

    return a;
  },
  { months: [], products: [] }
);

var ctx = document.getElementById("trendmensuel").getContext("2d");
var chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: data.months, // ito efa mety
    datasets: data.products,
  },
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<canvas id="trendmensuel" width="400" height="400"></canvas>

这篇关于如何在chart.js中对重复标签进行分组以创建没有重复的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！