如何在Morris折线图的Y轴显示'population'名称

嘿，这个需求很容易搞定，直接在Morris折线图的初始化配置里加个参数就行，我给你具体的代码示例和说明：

核心配置方法 #

在新版本的Morris.js里，初始化Morris.Line时添加yAxisLabel参数并设置为'population'，就能直接在Y轴显示这个名称了：

// 初始化Morris折线图
new Morris.Line({
  // 指定渲染图表的DOM元素ID
  element: 'population-chart',
  // 图表数据源
  data: [
    { year: '2018', count: 890000 },
    { year: '2019', count: 920000 },
    { year: '2020', count: 950000 },
    { year: '2021', count: 980000 }
  ],
  // X轴对应的字段
  xkey: 'year',
  // Y轴对应的字段
  ykeys: ['count'],
  // 系列名称（图例显示）
  labels: ['人口数量'],
  // 关键：设置Y轴的名称
  yAxisLabel: 'population',
  // 可选：开启网格线（默认开启）
  grid: true
});

适配旧版本Morris.js #

如果你用的是比较老的Morris版本，可能需要把yAxisLabel换成yLabel，写法差不多：

new Morris.Line({
  // 其他配置项...
  yLabel: 'population'
});

自定义Y轴标签样式 #

要是默认的标签样式不合心意，还能通过CSS调整字体、颜色这些：

/* 调整Y轴标签的样式 */
.morris-axis-label.y-axis {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

内容的提问来源于stack exchange，提问作者yer