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

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>