javascript - 在 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

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