如何在Morris.js图表的Y轴显示超过5个刻度标签？

我懂你的困扰！Morris.js默认确实只会在Y轴上显示5个刻度标签，不过咱们可以通过简单的配置调整，轻松实现自定义更多刻度的需求，比如你想要的1、10、20…100这种间隔的标签。

其实Morris.js本身就支持自定义Y轴刻度的配置，不用去改源码，直接在初始化图表的时候加两个参数就行，我结合你提供的代码给你改一下：

关键修改点 #

1. 先修正你代码里一个小问题：ymin和ymax的顺序写反啦！如果你的排名是1代表最高、100代表最低，那应该把ymin设为1，ymax设为100（要是你就是想让Y轴从100到1倒着显示，那可以保持原来的顺序，不过刻度也会跟着倒过来）。
2. 添加yTicks配置项：这个参数有两种用法，满足不同需求：
   • 如果你想要均匀分布的刻度，直接传入你想要的刻度数量就行；
   • 如果你想完全自定义每个刻度的值，就传入一个包含所有刻度的数组。

修改后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
</head>
<body>
    <style>
        #chart-container { width: 600px; height: 300px; }
    </style>
    <p>morris.js example chart</p>
    <div id="chart-container"></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/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>
    <script>
        const ranking_series = [
            { date: "2024-07-18", value: 66 },
            { date: "2024-07-25", value: 70 },
            { date: "2024-08-01", value: 62 },
            { date: "2024-08-03", value: 89 },
            { date: "2024-08-04", value: 66 },
            { date: "2024-08-08", value: 86 },
            { date: "2024-08-10", value: 35 },
            { date: "2024-08-12", value: 58 },
            { date: "2024-08-15", value: 55 },
            { date: "2024-08-18", value: 53 },
            { date: "2024-08-19", value: 55 },
            { date: "2024-08-20", value: 51 },
            { date: "2024-08-22", value: 72 },
            { date: "2024-08-24", value: 64 },
            { date: "2024-08-27", value: 100 },
            { date: "2024-08-29", value: 68 },
            { date: "2024-09-01", value: 63 },
            { date: "2024-09-03", value: 65 }
        ];

        var chart = Morris.Area({
            element: 'chart-container',
            data: ranking_series,
            xkey: ['date'],
            ykeys: ['value'],
            labels: ['rank'],
            pointSize: 0,
            fillOpacity: 0,
            pointStrokeColors: ['#303035'],
            behaveLikeLine: true,
            gridLineColor: '#eee',
            lineWidth: 3,
            hideHover: 'auto',
            lineColors: ['#4a8fe7'],
            resize: true,
            grid: true,
            axes: true,
            // 修正ymin和ymax的顺序（根据你的需求调整，如果要倒序就换回原来的）
            ymin: 1,
            ymax: 100,
            xLabelAngle: 45,
            xLabelMargin: 5,
            parseTime: false,
            // 方法1：指定刻度数量（这里设11个，对应1、10、20…100）
            yTicks: 11,
            // 方法2：手动指定刻度数组（如果需要完全自定义刻度值，就用这个）
            // yTicks: [1,10,20,30,40,50,60,70,80,90,100],
            yLabelFormat: function(y) { 
                return Math.floor(y); 
            }
        });
    </script>
</body>
</html>

额外说明 #

• 如果用yTicks指定数量，Morris.js会自动在ymin和ymax之间均匀分配刻度；如果你的Y轴范围是1到100，设11个刻度刚好是每10个单位一个标签，完美匹配你的需求。
• 要是你需要非均匀的刻度（比如某些特殊值重点显示），直接把yTicks换成你想要的数值数组就行，图表会严格按照你给的数组显示Y轴标签。

内容来源于stack exchange