Rails下使用Chartkick+Chart.js设置图表X、Y轴标签不生效如何解决

问题原因 #

你参考的hAxis、vAxis配置是Google Charts渲染器的专属参数，而Chartkick当前默认使用Chart.js作为渲染引擎，二者的配置字段结构完全不同，因此你的设置无法生效。

修复方案 #

将library下的配置替换为Chart.js对应的轴配置格式即可，修改后的视图代码如下：

= line_chart @event_chart,discrete:true, legend: "bottom",curve: false,
colors: ["#67b55e","#d43766","#729be0"],
:library => {
  plugins: {
    title: {
      display: true,
      text: "no. of events"
    }
  },
  scales: {
    x: {
      title: {
        display: true,
        text: "months"
      }
    },
    y: {
      title: {
        display: true,
        text: "Y-label"
      }
    }
  }
}

配置说明 #

• Chart.js的全局图表标题需要放在plugins.title字段下，同时必须手动设置display: true才会正常展示
• X/Y轴的配置统一放在scales字段下，分别对应x、y属性，轴标签同样需要开启display: true才能显示
• 如果修改后仍未生效，可检查项目依赖的Chart.js版本是否为3.x及以上，低版本的配置字段会有小幅差异
• 如果你确实要沿用原来的hAxis/vAxis配置，可以切换为Google Charts作为Chartkick的渲染器。

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