Chart.js Chartjs如何水平显示比例标签

由于文档非常糟糕（），我决定问Chart.js社区这个问题

如何更改刻度标签的角度？

这是我的真实观点

我想使这些标签水平（请参见红色标签）。 配置为：

yax：[{
显示：对，
scaleLabel：{
显示：对，
labelString:[this.label，this.valueUnit]，
尺寸：14，
},
afterFit:功能（缩放持续时间）{
scaleInstance.width=120；
}
}]

没有内置的方法可以做到这一点。如果您想实现这种行为，您必须使用自定义插件自己在画布上绘制它

没有内置的方法来实现这一点。如果你想实现这种行为，你必须自己用一个自定义插件在画布上绘制它。该插件提供了一系列钩子，可用于执行自定义代码。您可以使用

afterDraw

钩子在画布上直接使用绘制缩放标签

您还必须在图表左侧定义一些额外的填充，以确保比例标签不会与图表区域重叠

options: {
  layout: {
    padding: {
      left: 70
    }
  },

请看一下下面的可运行代码，看看它是如何工作的

新图表（document.getElementById（'myChart'）{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
ctx.save（）；
设yAxis=图表刻度['y轴-0']；
设y=yAxis.bottom/2；
ctx.textAlign='左'；
ctx.font=“14px Arial”；
ctx.fillStyle=“灰色”；
ctx.fillText（'Horizontal'，0，y-8）；
ctx.fillText（'Label'，0，y+8）；
ctx.restore（）；
}
}],
数据：{
标签：['A'，'B'，'C'，'D']，
数据集：[{
数据：[10,12,8,6]，
背景颜色：“rgba（255,99,132,0.2）”，
边框颜色：“rgb（255，99，132）”，
边框宽度：1，
填充：假
}]
},
选项：{
布局：{
填充：{
左：70
}
},
图例：{
显示：假
}
}
});

提供了一系列钩子，可用于执行自定义代码。您可以使用
afterDraw
钩子在画布上直接使用绘制缩放标签

您还必须在图表左侧定义一些额外的填充，以确保比例标签不会与图表区域重叠

options: {
  layout: {
    padding: {
      left: 70
    }
  },

请看一下下面的可运行代码，看看它是如何工作的


新图表（document.getElementById（'myChart'）{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
ctx.save（）；
设yAxis=图表刻度['y轴-0']；
设y=yAxis.bottom/2；
ctx.textAlign='左'；
ctx.font=“14px Arial”；
ctx.fillStyle=“灰色”；
ctx.fillText（'Horizontal'，0，y-8）；
ctx.fillText（'Label'，0，y+8）；
ctx.restore（）；
}
}],
数据：{
标签：['A'，'B'，'C'，'D']，
数据集：[{
数据：[10,12,8,6]，
背景颜色：“rgba（255,99,132,0.2）”，
边框颜色：“rgb（255，99，132）”，
边框宽度：1，
填充：假
}]
},
选项：{
布局：{
填充：{
左：70
}
},
图例：{
显示：假
}
}
});
您可以定义第二个y轴，负责水平绘制比例标签

单个
yAxis.ticks
标签可以通过与一些标签一起定义来左对齐

要使勾号标签在图表区域上可见，需要在图表左侧定义相同的填充

请看一下下面的可运行代码，看看它是如何工作的


新图表（document.getElementById（'myChart'）{
键入：“行”，
数据：{
标签：['A'，'B'，'C'，'D']，
数据集：[{
数据：[10,12,8,6]，
背景颜色：“rgba（255,99,132,0.2）”，
边框颜色：“rgb（255，99，132）”，
边框宽度：1，
填充：假
}]
},
选项：{
布局：{
填充：{
左：60
}
},
图例：{
显示：假
},
比例：{
雅克斯：[{
},
{
滴答声：{
步长：0.5，
镜子：是的，
填充：60，
fontColor:'红色'，
回调：v=>v==0.5？[“水平”，“标签]]：未定义
},
网格线：{
显示：假
}
}
]
}
}
});
您可以定义第二个y轴，负责水平绘制比例标签

单个
yAxis.ticks
标签可以通过与一些标签一起定义来左对齐

要使勾号标签在图表区域上可见，需要在图表左侧定义相同的填充

请看一下下面的可运行代码，看看它是如何工作的


新图表（document.getElementById（'myChart'）{
键入：“行”，
数据：{
标签：['A'，'B'，'C'，'D']，
数据集：[{
数据：[10,12,8,6]，
背景颜色：“rgba（255,99,132,0.2）”，
边框颜色：“rgb（255，99，132）”，
边框宽度：1，
填充：假
}]
},
选项：{
布局：{
填充：{
左：60
}
},
图例：{
显示：假
},
比例：{
雅克斯：[{
},
{
滴答声：{
步长：0.5，
镜子：是的，
填充：60，
fontColor:'红色'，
回调：v=>v==0.5？[“水平”，“标签]]：未定义
},
网格线：{
显示：假
}
}
]
}
}
});

对我来说太复杂了。对我来说太复杂了。谢谢。我认为这种方法比其他任何方法都好。谢谢。我认为这种方法比其他方法好得多。
ticks: {
  mirror: true,
  padding: 60,
  ...

layout: {
  padding: {
    left: 60
  }
},