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

smtd7mpg  于 2023-01-30  发布在  Chart.js
关注(0)|答案(1)|浏览(228)

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

  1. var whatsNewArray = [{
  2.     "type": "EAC",
  3.     "age": -16
  4.   },
  5.   {
  6.     "type": "EAC",
  7.     "age": -58
  8.   },
  9.   {
  10.     "type": "DSCC",
  11.     "age": -36
  12.   },
  13.   {
  14.     "type": "SAFE AE",
  15.     "age": -95
  16.   },
  17.   {
  18.     "type": "SAFE AE",
  19.     "age": -94
  20.   }
  21. ]
  23.   new Chart(document.getElementById("myWHATSNEWChart"), {
  24.     type: 'scatter',
  25.     data: {
  26.       datasets: [{
  27.         data: whatsNewArray.map(function(a) {
  28.           return a.age;
  29.         }),
  30.         backgroundColor: ["#acc6ff"],
  31.         label: "New Items",
  32.         pointRadius: 10,
  33.         fill: true
  34.       }]
  35.     },
  36.     options: {
  37.       indexAxis: 'y',
  38.       maintainAspectRatio: false,
  39.       responsive: true,
  40.       layout: {
  41.         padding: 20
  42.       },
  43.       scales: {
  45.         y: {
  46.           ticks: {
  47.             color: "#a3a3a3"
  48.           },
  49.           type: "category",
  50.           labels: whatsNewArray.map(function(a) {
  51.             return a.type;
  52.           }),
  53.           grid: {
  54.             color: "#a3a3a3",
  55.             borderColor: "#a3a3a3"
  56.           }
  57.         },
  58.         x: {
  59.           title: {
  60.             display: true,
  61.             text: "MINUTES AGO",
  62.             color: "#a3a3a3"
  63.           },
  64.           ticks: {
  65.             color: "#a3a3a3"
  66.           },
  67.           beginAtZero: true,
  68.           grid: {
  69.             color: "#a3a3a3",
  70.             borderColor: "#a3a3a3"
  71.           },
  72.           border: {
  73.             color: "#a3a3a3"
  74.           }
  75.         }
  76.       },
  77.       plugins: {
  78.         legend: {
  79.           display: false,
  80.           title: {
  81.             color: "#a3a3a3"
  82.           },
  83.           labels: {
  84.             color: "#a3a3a3"
  85.           }
  86.         },
  87.         title: {
  88.           display: false,
  89.           //text: 'What is New',
  90.           color: "#a3a3a3"
  91.         }
  92.       }
  93.     }
  94.   });
  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet"/>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
  5. <div class="chart-container mb-4" style="position: relative;width:100%;height:250px;background-color:#283044;">
  6.   <canvas id="myWHATSNEWChart"></canvas>
  7. </div>
chart.js

1条答案

按热度按时间
swvgeqrz

swvgeqrz1#

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

  1. var whatsNewArray = [{
  2.     "type": "EAC",
  3.     "age": -16
  4.   },
  5.   {
  6.     "type": "EAC",
  7.     "age": -58
  8.   },
  9.   {
  10.     "type": "DSCC",
  11.     "age": -36
  12.   },
  13.   {
  14.     "type": "SAFE AE",
  15.     "age": -95
  16.   },
  17.   {
  18.     "type": "SAFE AE",
  19.     "age": -94
  20.   },
  21.    {
  22.     "type": "DSCC",
  23.     "age": -2
  24.   },
  25.    {
  26.     "type": "EL",
  27.     "age": -2
  28.   },
  29.    {
  30.     "type": "PSY",
  31.     "age": -20
  32.   },
  33.   {
  34.     "type": "CNGRO",
  35.     "age": -80
  36.   },
  37.   {
  38.     "type": "CNGRO",
  39.     "age": -69
  40.   },
  41. ];
  43. let label =  [...new Map(whatsNewArray.map(item =>
  44.                   [item["type"], item["type"]])).values()];
  46. let data = whatsNewArray.map(function(elem, index) {
  47.   return {
  48.     x: elem.age,
  49.     y: label.indexOf(elem.type)
  50.   }
  51. });
  53. const _data = {
  54.   datasets: [{
  55.     label: 'Scatter Dataset',
  56.     data: data,
  57.     backgroundColor: 'rgb(255, 99, 132)'
  58.   }],
  59. };
  60. const config = {
  61.   type: 'scatter',
  62.   data: _data,
  63.   options: {
  64.     responsive: true,
  65.     layout: {
  66.         padding: 20
  67.     },
  68.     pointRadius: 10,
  69.     fill: true,
  70.     scales: {
  72.       y: {
  73.       autofill: false,
  74.         labels: label,
  75.         
  76.         ticks: {
  77.           callback: function(value, index, ticks) {
  78.               
  79.               return value % 1 == 0 ? label[value] : ''
  80.                         
  81.           }
  82.         },
  83.        
  84.       }
  85.     }
  87.   }
  88. };
  90. new Chart(document.getElementById("myWHATSNEWChart"), config);
  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.dark.min.css" rel="stylesheet" />
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
  6. <canvas id="myWHATSNEWChart"></canvas>
    • 说明：**因此数组label的索引被识别为y轴数据[0，1，2 ....]。

这将返回不同的值：

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

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

  1. value % 1 == 0
展开查看全部
赞(0）分享  回复(0）举报  2023-01-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com