能够在 chart.js 中旋转 y 轴标题

Question

我试图在 chart.js 中将 y 轴的标题顺时针旋转 90 度，但我找不到任何方法来做到这一点。

这个问题 chartjs: trying to rotate the y-Axis label 只旋转 ticks/labels 而不是 y 轴标题本身。

我能找到的唯一相关 post 是这个 Ability to rotate axis title，回复是 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>

Answer 1

您可以使用自定义插件，要使 space 您首先需要增加左侧的填充，然后您可以通过取顶部和底部 y 的平均值来计算正确的位置图表区。

此外，您不应包含 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 轴标题

Ability to rotate y axis title in chart.js

javascript

rotation

chart.js