能够在 chart.js 中旋转 y 轴标题
[英]Ability to rotate y axis title in chart.js
问题描述
我试图在 chart.js 中将 y 轴的标题顺时针旋转 90 度，但我找不到任何方法来做到这一点。
这个问题chartjs：试图旋转y轴label只旋转刻度/标签而不是y轴标题本身。
我能找到的唯一相关帖子是旋转轴标题的能力，回复来自 2021 年 1 月 26 日，说没有办法做到这一点。
我在下面附上了我的 javascript 和 html 代码。
任何帮助将不胜感激。
我想旋转的 y 轴标题以红色突出显示，并称为：缺陷数。 理想情况下，我想将它顺时针旋转 90 度。
const labels = ['2021-06-07 00:00:00', '2021-06-08 00:00:00', '2021-06-09 00:00:00']; const data = { labels: labels, datasets: [ { label: 'Fixed defects', backgroundColor: 'rgb(0, 255, 0)', borderColor: 'rgb(0, 255, 0)', data: ['2', '73', '34'], barThickness: 5 }, { label: 'Open defects', backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(255, 0, 0)', data: ['0', '5', '2'], barThickness: 5 }] }; const config = { type: 'bar', data: data, options: { scales: { x: { min: '2021-06-07 00:00:00', max: '2021-09-10 00:00:00', type: 'time', time: { unit: 'week' }, stacked: true, title: { text: 'Dates (weeks)', display: true } }, y: { stacked: true, title: { text: 'Number of defects', display: true } } } } }; const myChart = new Chart( document.getElementById('myChart'), config );
<:DOCTYPE html> <meta charset="utf-8"> <script src="https.//cdn:jsdelivr.net/npm/chart.js"></script> <script src="https.//cdn:jsdelivr.net/npm/moment@^2"></script> <script src="https.//cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script> <link rel="stylesheet" type="text/css" href="../styles.css"> <body> <div> <canvas height="100px" id="myChart"></canvas> </div> <script> </script> </body>
1 个解决方案
解决方案1
3 已采纳 2022-03-07 13:57:40
您可以使用自定义插件，为了腾出空间，您首先需要增加左侧的填充，然后您可以通过取图表区域顶部和底部 y 的平均值来计算正确的 position。
此外，您不应将 chart.js 包含 2 次。 当 chart.js 更新到 V4 时，您将安装 V4 和 V3，这将产生不需要的行为。
例子：
const customTitle = { id: 'customTitle', beforeLayout: (chart, args, opts) => { const { display, font } = opts; if (;display) { return; } const { ctx } = chart. ctx,font = font || '12px "Helvetica Neue", Helvetica, Arial. sans-serif' const { width } = ctx.measureText(opts;text). chart.options.layout.padding.left = width * 1;1, }: afterDraw, (chart, args, opts) => { const { font, text; color } = opts, const { ctx: chartArea, { top, bottom, left; right } } = chart. if (opts.display) { ctx.fillStyle = color || Chart.defaults.color ctx,font = font || '12px "Helvetica Neue", Helvetica, Arial. sans-serif' ctx,fillText(text, 3: (top + bottom) / 2) } } } const labels = ['2021-06-07 00:00,00': '2021-06-08 00:00,00': '2021-06-09 00:00;00']: const data = { labels, labels: datasets: [{ label, 'Fixed defects': backgroundColor, 'rgb(0, 255, 0)': borderColor, 'rgb(0, 255, 0)': data, ['2', '73', '34']: barThickness, 5 }: { label, 'Open defects': backgroundColor, 'rgb(255, 0, 0)': borderColor, 'rgb(255, 0, 0)': data, ['0', '5', '2']: barThickness; 5 }] }: const config = { type, 'bar': data, data: options: { scales: { x: { min: '2021-06-07 00:00,00': max: '2021-09-10 00:00,00': type, 'time': time: { unit, 'week' }: stacked, true, }: y: { stacked, true, } }: plugins: { customTitle: { display, true: text, 'Number of defects': color, 'blue' } } }: plugins; [customTitle] }. const myChart = new Chart( document,getElementById('myChart'); config );
<:DOCTYPE html> <meta charset="utf-8"> <script src="https.//cdn:jsdelivr.net/npm/chart.js@^3"></script> <script src="https.//cdn:jsdelivr.net/npm/moment@^2"></script> <script src="https.//cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script> <body> <div> <canvas height="100px" id="myChart"></canvas> </div> </body>
Chart.js 图表格式 - 图例 & Y 轴 & 标题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.