javascript - 如何设置更大的负值以在莫里斯条形图中显示更短的条形图？

Question

看看这个jsfiddle link

我将使用此图表显示购买不足的数量，那么如何在图表中设置 -20 的条柱比 -50 短？

-60 甚至没有显示在图表上。

如果我取消注释 //,{ material: '', value: 0, vendor: '' }，则图表会根据我的要求正确显示，但这不是解决方法我在找。

我的图表将只包含负值，我该如何解决这个问题？

new Morris.Bar({
    // ID of the element in which to draw the chart.
    element: 'myfirstchart',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [
        { material: 'aaa', value: -20, vendor: 'aaa' },
        { material: 'bbb', value: -30, vendor: 'bbb' },
        { material: 'ccc', value: -40, vendor: 'ccc' },
        { material: 'ddd', value: -50, vendor: 'ddd' },
        { material: 'eee', value: -60, vendor: 'eee' }
        //,{ material: '', value: 0, vendor: '' }
    ],
    hoverCallback: function(index, options, content) {
        var row = options.data[index]; 
        return(row.value + "<br>" + row.vendor);
    },
    // The name of the data record attribute that contains x-values.
    xkey: 'material',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['value'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['not in use']
});

Answer 1

将 ymax 属性设置为 0:

请尝试以下代码段:

new Morris.Bar({
  element: 'myfirstchart',
  data: [
    { material: 'aaa', value: -20, vendor: 'aaa' },
    { material: 'bbb', value: -30, vendor: 'bbb' },
    { material: 'ccc', value: -40, vendor: 'ccc' },
    { material: 'ddd', value: -50, vendor: 'ddd' },
    { material: 'eee', value: -60, vendor: 'eee' }
  ],
	hoverCallback: function(index, options, content) {
  	var row = options.data[index]; 
		return(row.value + "<br>" + row.vendor);
	},
  xkey: 'material',
  ykeys: ['value'],
  labels: ['not in use'],
  ymax: 0
});

<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"></div>