Morris.js实现隐藏指定ykeys图形但保留对应标签显示

我在使用Morris.js绘制堆叠柱状图时遇到了一个需求：我的数据包含a、b、c三个变量，其中c是a与b的总和。我希望保留图例中的"Total"标签（对应c变量），但不绘制c对应的柱子，只展示a和b的堆叠效果。

当前代码与问题 #

当前实现代码：

Morris.Bar({
  element: 'bar-example2',
  data: [
    { y: '2018-05-21', a: 0, b: 8472, c: 8472 },
    { y: '2018-05-20', a: 0, b: 8391, c: 20 },
    { y: '2018-05-19', a: 0, b: 9031, c: 9031 },
    { y: '2018-05-18', a: 0, b: 8974, c: 8974 },
    { y: '2018-05-17', a: 360, b: 9095, c: 9455 },
    { y: '2018-05-16', a: 0, b: 10017, c: 10017 },
    { y: '2018-05-15', a: 0, b: 9576, c: 9576 }
  ],
  xkey: 'y',
  ykeys: ['a','b','c'],
  labels: ['Mot1', 'Mot2', 'Total'],
  stacked: true
});

当前图表效果：

期望图表效果：

解决方案 #

Morris.js没有直接提供“保留图例但隐藏对应系列”的配置项，但我们可以通过两种简单方法实现需求：

方案一：将Total系列的柱子设为透明 #

通过barColors配置把对应Total的柱子颜色设为完全透明，这样柱子不会显示，图例的标签也会保留：

Morris.Bar({
  element: 'bar-example2',
  data: [
    { y: '2018-05-21', a: 0, b: 8472, c: 8472 },
    { y: '2018-05-20', a: 0, b: 8391, c: 8391 }, // 注意：这里原始数据的c值有误，修正为a+b的总和
    { y: '2018-05-19', a: 0, b: 9031, c: 9031 },
    { y: '2018-05-18', a: 0, b: 8974, c: 8974 },
    { y: '2018-05-17', a: 360, b: 9095, c: 9455 },
    { y: '2018-05-16', a: 0, b: 10017, c: 10017 },
    { y: '2018-05-15', a: 0, b: 9576, c: 9576 }
  ],
  xkey: 'y',
  ykeys: ['a','b','c'],
  labels: ['Mot1', 'Mot2', 'Total'],
  stacked: true,
  barColors: ['#0b62a4', '#7a92a3', 'rgba(0, 0, 0, 0)'] // 第三个颜色设为完全透明
});

方案二：用CSS隐藏Total系列的柱子（保留图例颜色） #

如果你希望图例中的Total颜色块是可见的（比如灰色、黑色），可以用CSS精准隐藏对应柱子，同时保留图例样式：

第一步：修改JS配置，给Total设置可见颜色

Morris.Bar({
  element: 'bar-example2',
  data: [
    { y: '2018-05-21', a: 0, b: 8472, c: 8472 },
    { y: '2018-05-20', a: 0, b: 8391, c: 8391 },
    { y: '2018-05-19', a: 0, b: 9031, c: 9031 },
    { y: '2018-05-18', a: 0, b: 8974, c: 8974 },
    { y: '2018-05-17', a: 360, b: 9095, c: 9455 },
    { y: '2018-05-16', a: 0, b: 10017, c: 10017 },
    { y: '2018-05-15', a: 0, b: 9576, c: 9576 }
  ],
  xkey: 'y',
  ykeys: ['a','b','c'],
  labels: ['Mot1', 'Mot2', 'Total'],
  stacked: true,
  barColors: ['#0b62a4', '#7a92a3', '#666'] // 给Total设置一个深灰色图例颜色
});

第二步：添加CSS隐藏Total柱子

/* 精准隐藏每个分组中的第三个柱子（对应Total系列） */
#bar-example2 .morris-bar-group rect:nth-child(3n) {
  display: none;
}

注意事项 #

• 原始数据中2018-05-20的c值是20，这和a+b的总和（8391）不符，必须修正这个数据错误，否则堆叠后的柱子高度会和Total数值不匹配。
• 两种方案都能实现“保留Total图例，只显示a和b堆叠柱子”的效果，可以根据你对图例颜色的需求选择。

内容的提问来源于stack exchange，提问作者Blás Lagger