我有下面的图表:
但是,我想将y轴标签转换为以下格式:
是否可以使用ChartJS在刻度线之间移动y轴标签,如上面的示例图像所示?功能类似于options.scales.yAxes[].ticks.position选项,除了目前它被定义为in the x direction for the y axis,因为我需要它在y轴的y方向。更好的是,自动居中。
options.scales.yAxes[].ticks.position
in the x direction for the y axis
41zrol4v1#
遗憾的是,目前ChartJS中没有用于此目的的内置方法。您可能需要创建一个图表插件来实现这一点。
plugins: [{ beforeDraw: function(chart) { var ctx = chart.ctx; var yAxis = chart.scales['y-axis-0']; var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0); yAxis.options.ticks.fontColor = 'transparent'; // hide original tick // loop through ticks array Chart.helpers.each(yAxis.ticks, function(tick, index) { if (index === yAxis.ticks.length - 1) return; var xPos = yAxis.right; var yPos = yAxis.getPixelForTick(index); var xPadding = 10; // draw tick ctx.save(); ctx.textBaseline = 'middle'; ctx.textAlign = 'right'; ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'; ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2); ctx.restore(); }); } }]
**注意:**这将隐藏第一个刻度(从0开始)
第一次
e5njpo682#
我认为您可以用途:yAxes: [{gridLines: { offsetGridLines: true }}]。标签值将是厚度之间的平均值。
yAxes: [{gridLines: { offsetGridLines: true }}]
y4ekin9u3#
使用当前版本的Chart.js,您可以执行以下操作:
y : { type: "category", labels, offset: true, grid: { offset: true } }
3条答案
按热度按时间41zrol4v1#
遗憾的是,目前ChartJS中没有用于此目的的内置方法。
您可能需要创建一个图表插件来实现这一点。
**注意:**这将隐藏第一个刻度(从0开始)
第一次
e5njpo682#
我认为您可以用途:
yAxes: [{gridLines: { offsetGridLines: true }}]
。标签值将是厚度之间的平均值。y4ekin9u3#
使用当前版本的Chart.js,您可以执行以下操作: