Question

我的morris bar chart有两组数据，每组有五个小节。如何设置组中的每个条形以显示其自己的悬停标签？

＆＃13;

var myData = [
	{"year":2018,"material1":"00-00012","material2":"00-00011","material3":"00-00010","material4":"00-00009","material5":"00-00008","value1":220.00,"value2":210.00,"value3":200.00,"value4":190.00,"value5":180.00,"vendor1":"12345","vendor2":"12345","vendor3":"12345","vendor4":"12345","vendor5":"12345"},
	{"year":2017,"material1":"00-00012","material2":"00-00011","material3":"00-00010","material4":"00-00009","material5":"00-00008","value1":220.00,"value2":210.00,"value3":200.00,"value4":190.00,"value5":180.00,"vendor1":"12345","vendor2":"12345","vendor3":"12345","vendor4":"12345","vendor5":"12345"}
	];
Morris.Bar({
  element: 'myfirstchart',
  data: myData,	
  xkey: 'year',
  ykeys: ['value1', 'value2', 'value3', 'value4', 'value5',],
  labels: ['Series A', 'Series B', 'Series C', 'Series D', 'Series E'],
  hoverCallback: function (index, options, content) {
	var row = options.data[index];
	return ("Mat: " + row.material1 + ", Qty: " + row.value1 + ", Vendor: " + row.vendor1 + "<br>"
	+ "Mat: " + row.material2 + ", Qty: " + row.value2 + ", Vendor: " + row.vendor2 + "<br>"
	+ "Mat: " + row.material3 + ", Qty: " + row.value3 + ", Vendor: " + row.vendor3 + "<br>"
	+ "Mat: " + row.material4 + ", Qty: " + row.value4 + ", Vendor: " + row.vendor4 + "<br>"
	+ "Mat: " + row.material5 + ", Qty: " + row.value5 + ", Vendor: " + row.vendor5
	);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="myfirstchart" style="height: 250px;"></div>

＆＃13;

如何设置组中的每个条以在Morris条形图中显示自己的悬停标签？

0 个答案: