在Morris.js中将xKey划分为多个属性？

Question

我在 Morris.js 使用 PHP 生成的条形图中显示 MySQL 值。目前我只在 x 轴上显示一个属性，在 y 轴上显示它的值。是否可以把xkey分成多个属性？

也就是说，对于ID = BBAT102，将显示错误、正确和百分比的值。但相反，我希望在 xKey 中提及错误、正确和百分比，以便这些属性中的每一个都有自己的栏。

php:

while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ ID:'".$row["ID"]."', Wrongs:".$row["Wrongs"].", Rights:".$row["Rights"]." , Age:".$row["Age"]. ", Percentage:'".$row["Percentage"]."'},";

}
echo $chart_data;

js:

<script>
$(document).ready(function () { 
 Morris.Bar({
  element: 'chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',  //Currently displaying ID but I need 'Wrongs', 'Rights', 'Percentage' to be displayed
  ykeys: ['Wrongs', 'Rights', 'Percentage'],
  labels: ['Wrongs', 'Rights', 'Perecentage'],
    hideHover:true,
  stacked:true
  });
});
</script>

Answer 1

我把所有东西都一对一地堆叠起来，这就是为什么它们会垂直堆叠在一起的原因。我重新创建了脚本以支持非堆叠；

<script>
$(document).ready(function () { 
var labelColor = jQuery('#chart').css('color');
 Morris.Bar({
  element: 'chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',
  ykeys: ['Rights', 'Wrongs', 'Percentage'],
  labels: ['Rights','Wrongs', 'Percentage'],
  hideHover:true,
  gridTextColor: labelColor,
  barColors: jQuery('#chart').data('colors').split(',')
 // yLabelFormat: function(y) {return y = Math.round(y);}
  });
});
</script>

在Morris.js中将xKey划分为多个属性？

Divide xKey to more than one attribute in Morris.js?

javascript

php

mysql

morris.js