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

看看这个

我将使用此图表在“采购数量”下显示，那么如何设置图表中-20的条形图短于-50

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

如果我取消注释<代码>//，{material:''，值：0，供应商：'}，则图表将根据我的要求正确显示，但这不是我正在寻找的修复方法

我的图表将只包含负值，如何修复此问题

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']
});

新莫里斯酒吧({
//要在其中绘制图表的元素的ID。
元素：“myfirstchart”，
//图表数据记录——此数组中的每个条目对应于
//图表。
数据：[
{物料：'aaa'，值：-20，供应商：'aaa'}，
{物料：'bbb'，值：-30，供应商：'bbb'}，
{材料：'ccc'，值：-40，供应商：'ccc'}，
{物料：'ddd'，值：-50，供应商：'ddd'}，
{物料：'eee'，值：-60，供应商：'eee'}
//，{物料：''，值：0，供应商：'}
],
hoverCallback：函数（索引、选项、内容）{
var行=选项。数据[索引]；
返回（row.value+“
”+row.vendor）；
},
//包含x值的数据记录属性的名称。
xkey:‘材料’，
//包含y值的数据记录属性的名称列表。
ykeys:['value']，
//当您将鼠标悬停在
//图表。
标签：[“未使用”]
});

将

ymax

属性设置为0:

请尝试以下代码段：

新莫里斯酒吧({
元素：“myfirstchart”，
数据：[
{物料：'aaa'，值：-20，供应商：'aaa'}，
{物料：'bbb'，值：-30，供应商：'bbb'}，
{材料：'ccc'，值：-40，供应商：'ccc'}，
{物料：'ddd'，值：-50，供应商：'ddd'}，
{物料：'eee'，值：-60，供应商：'eee'}
],
hoverCallback：函数（索引、选项、内容）{
var行=选项。数据[索引]；
返回（row.value+“
”+row.vendor）；
},
xkey:‘材料’，
ykeys:['value']，
标签：[“未使用”]，
ymax:0
});

如果没有任何正值，morris.js似乎无法正确显示图表。我想这是一个好主意bug@Bogdan：将
ymax
属性设置为0可以解决该问题。