ChartJS 图表JS -Y轴上的分组数组结果

smtd7mpg 于 2023-01-30 发布在 Chart.js

关注(0)|答案(1)|浏览(172)

我想我已经接近解决这个问题了，但我遗漏了一些关键的东西。我有一个"新"项目数组，我试图将其绘制在图表上，以指示它们的年龄。我可以让图表加载并绘制数据，但类似的项目没有分组到同一行上。有没有一种方法可以强制图表将类似的类型放在图表中的同一轴线上？即。2个SAFE AE结果加载到同一行？如有任何指导，将不胜感激!

var whatsNewArray = [{
    "type": "EAC",
    "age": -16
  },
  {
    "type": "EAC",
    "age": -58
  },
  {
    "type": "DSCC",
    "age": -36
  },
  {
    "type": "SAFE AE",
    "age": -95
  },
  {
    "type": "SAFE AE",
    "age": -94
  }
]

  new Chart(document.getElementById("myWHATSNEWChart"), {
    type: 'scatter',
    data: {
      datasets: [{
        data: whatsNewArray.map(function(a) {
          return a.age;
        }),
        backgroundColor: ["#acc6ff"],
        label: "New Items",
        pointRadius: 10,
        fill: true
      }]
    },
    options: {
      indexAxis: 'y',
      maintainAspectRatio: false,
      responsive: true,
      layout: {
        padding: 20
      },
      scales: {

        y: {
          ticks: {
            color: "#a3a3a3"
          },
          type: "category",
          labels: whatsNewArray.map(function(a) {
            return a.type;
          }),
          grid: {
            color: "#a3a3a3",
            borderColor: "#a3a3a3"
          }
        },
        x: {
          title: {
            display: true,
            text: "MINUTES AGO",
            color: "#a3a3a3"
          },
          ticks: {
            color: "#a3a3a3"
          },
          beginAtZero: true,
          grid: {
            color: "#a3a3a3",
            borderColor: "#a3a3a3"
          },
          border: {
            color: "#a3a3a3"
          }
        }
      },
      plugins: {
        legend: {
          display: false,
          title: {
            color: "#a3a3a3"
          },
          labels: {
            color: "#a3a3a3"
          }
        },
        title: {
          display: false,
          //text: 'What is New',
          color: "#a3a3a3"
        }
      }
    }
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<div class="chart-container mb-4" style="position: relative;width:100%;height:250px;background-color:#283044;">
  <canvas id="myWHATSNEWChart"></canvas>
</div>

chart.js

来源：https://stackoverflow.com/questions/75246294/chart-js-group-array-results-on-y-axis

1条答案

按热度按时间

swvgeqrz1#

我已经为你的问题创建了这个最小的例子。你可以添加你想要的自定义选项。
必须将y轴视为索引，因此.findIndex(el => el.type == elem.type)检查elem.type是否存在于数组中，并返回找到的元素的索引。

var whatsNewArray = [{
    "type": "EAC",
    "age": -16
  },
  {
    "type": "EAC",
    "age": -58
  },
  {
    "type": "DSCC",
    "age": -36
  },
  {
    "type": "SAFE AE",
    "age": -95
  },
  {
    "type": "SAFE AE",
    "age": -94
  },
   {
    "type": "DSCC",
    "age": -2
  },
   {
    "type": "EL",
    "age": -2
  },
   {
    "type": "PSY",
    "age": -20
  },
  {
    "type": "CNGRO",
    "age": -80
  },
  {
    "type": "CNGRO",
    "age": -69
  },
];

let label =  [...new Map(whatsNewArray.map(item =>
                  [item["type"], item["type"]])).values()];

let data = whatsNewArray.map(function(elem, index) {
  return {
    x: elem.age,
    y: label.indexOf(elem.type)
  }
});

const _data = {
  datasets: [{
    label: 'Scatter Dataset',
    data: data,
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};
const config = {
  type: 'scatter',
  data: _data,
  options: {
    responsive: true,
    layout: {
        padding: 20
    },
    pointRadius: 10,
    fill: true,
    scales: {

      y: {
      autofill: false,
        labels: label,
        
        ticks: {
          callback: function(value, index, ticks) {
              
              return value % 1 == 0 ? label[value] : ''
                        
          }
        },
       
      }
    }

  }
};

new Chart(document.getElementById("myWHATSNEWChart"), config);

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>

<canvas id="myWHATSNEWChart"></canvas>

- 说明：**因此数组label的索引被识别为y轴数据[0，1，2 ....]。

这将返回不同的值：

[...new Map(whatsNewArray.map(item => [item["type"], item["type"]])).values()];

这将检查该值是否为整数，以删除此上下文中的小数值。

value % 1 == 0

赞(0）回复(0）举报 2023-01-30

我来回答

ChartJS 图表JS -Y轴上的分组数组结果

1条答案

相关问题

热门标签

最新问答