在morris.bar图表中，未显示所有标签，但是当我放大时，所有标签均显示正确

Question

在Morris.js条形图中，所有标签均显示不正确

但是在大​​屏幕上它可以正确显示所有标签。它有12个标签，但并未显示所有标签。

Morris.Bar({
        element: 'morris-bar-chart',
        barGap:4,
        barSizeRatio:0.55,
        data: [

            <?php for($i=0;$i<12;$i++)
            {
                echo "{y: '";
                echo $barchart1[$i]->month;
                echo "', a: ";
                echo $barchart1[$i]->totalamount; 
                echo ", b:";
                echo ($barchart2[$i]->totalamount) ? $barchart2[$i]->totalamount : "0";
                echo "}";

                if($i!=11)
                {
                  echo ",\n";
                }
            }
                ?>
           ],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Invoice Amount', 'Received Amount'],
        barColors: ['#55ce63', '#03a9f3'],
        hideHover: 'auto',
        gridLineColor: '#eef0f2',
        resize: true
    });

Answer 1

这是因为默认情况下，莫里斯图将左右边距应用于X轴上的标签。这是为了避免标签彼此之间过于靠近。您可以通过选项xLabelMargin进行更改（默认值为50，每个示例可以尝试10）。