如何在Chart.js水平条形图中移除网格线、边框仅保留刻度

我基于之前的方案制作了一个Chart.js水平条形图，但遇到了样式问题：设置grid.display: false时，X轴刻度会跟着消失，而且图表还有边框残留。想要实现仅保留X轴时间刻度，移除所有网格线和边框的效果。

当前代码 #

const d0 = new Date("2023-02-15T00:00:00.721Z").getTime()
const d1 = new Date("2023-02-15T01:00:00.721Z").getTime()
const d2 = new Date("2023-02-15T02:30:00.721Z").getTime()
const d3 = new Date("2023-02-15T03:20:00.721Z").getTime()
const d4 = new Date("2023-02-15T05:05:00.721Z").getTime()
let values = [d0, d1, d2, d3, d4];

let data = {
    labels: [""],
    datasets: [{
      label: 'up',
      axis: 'y',
      data: [d1],
      backgroundColor: 'red',
    },{
      label: 'down',
      axis: 'y',
      data: [d2],
      backgroundColor: 'yellow',
    },{
      label: 'out',
      axis: 'y',
      data: [d3],
      backgroundColor: 'green',
    },{
      label: 'up',
      axis: 'y',
      data: [d4],
      backgroundColor: 'red',
    }
  ]
};

const config = {
  data,
  type: 'bar',
  options:{
    elements: {
      bar: {
        borderWidth: 0
      }
    },
    ticks: {
        display: true
      },

    interaction: {
          mode: 'dataset'
      },
    tooltip: {
       mode: 'dataset'  
    },
    hover: {
         mode: 'dataset'            
      },
     onClick: function (e) {
                       var activePointLabel = 
                         this.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)
                       alert(activePointLabel[0].datasetIndex);
                   }
                ,      
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: false,
      },
    },
    indexAxis: 'y',
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        grid: {
          display: true
        },
        min: d0,
        ticks: {
            callback: function(value, index, ticks) {
                return moment(value).format('HH:mm');
            }
        },
      },
      y: {
         grid: {
          display: false
        },
        stacked: true
      },
    }    
  }};

new Chart(document.getElementById("chart"), config);

解决方法 #

要实现目标样式，只需调整scales中的轴配置，以及添加全局布局配置，具体修改点如下：

• X轴配置：隐藏网格线与边框，保留刻度
  在scales.x中修改grid和border属性，区分网格线和刻度的显示逻辑：

  x: {
    grid: {
      display: false, // 隐藏网格线
      drawBorder: false // 隐藏X轴与图表主体的连接边框
    },
    border: {
      display: false // 隐藏X轴自身的边框
    },
    min: d0,
    ticks: {
        display: true, // 强制保留刻度显示
        callback: function(value, index, ticks) {
            return moment(value).format('HH:mm');
        }
    }
  }
  

• Y轴配置：隐藏所有边框、网格线和刻度
  在scales.y中补充border和ticks配置，清理不需要的元素：

  y: {
    grid: {
      display: false
    },
    border: {
      display: false // 隐藏Y轴边框
    },
    stacked: true,
    ticks: {
      display: false // 隐藏Y轴刻度
    }
  }
  

• 全局布局：移除额外内边距
  在options中添加layout配置，避免图表周围出现空白边框：

  layout: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  }
  

修改后的完整配置 #

整合以上修改后，最终的config对象如下：

const config = {
  data,
  type: 'bar',
  options:{
    elements: {
      bar: {
        borderWidth: 0
      }
    },
    layout: {
      padding: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      }
    },
    interaction: {
          mode: 'dataset'
      },
    tooltip: {
       mode: 'dataset'  
    },
    hover: {
         mode: 'dataset'            
      },
     onClick: function (e) {
                       var activePointLabel = 
                         this.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)
                       alert(activePointLabel[0].datasetIndex);
                   }
                ,      
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: false,
      },
    },
    indexAxis: 'y',
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        grid: {
          display: false,
          drawBorder: false
        },
        border: {
          display: false
        },
        min: d0,
        ticks: {
            display: true,
            callback: function(value, index, ticks) {
                return moment(value).format('HH:mm');
            }
        },
      },
      y: {
        grid: {
          display: false
        },
        border: {
          display: false
        },
        stacked: true,
        ticks: {
          display: false
        }
      },
    }    
  }};

这样就能得到仅保留X轴刻度、无网格线和边框的水平条形图，符合目标样式。

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