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

Question

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

但在大屏幕上显示所有标签properly.It有 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

这是因为 Morris 图在默认情况下对 X 轴上的标签应用左右边距。这是为了避免标签彼此靠得太近。您可以通过选项 xLabelMargin 更改它（默认值为 50，您可以尝试每个示例 10 个）。