Question

我将使用此图表显示购买量不足的数量，那么如何设置-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>

如何设置更大的负值以在morris条形图中显示更短的条形图？

1 个答案: