Chart.js在折线图周围添加边框，yAxis单位标题（[s]）

Question

我有chartJS的问题。我无法在图表，yAxis单位标题和带元素的yAxis labelString周围添加边框。我正在使用打字稿做出反应。我只能在labelString中添加字符串。您可以在屏幕上看到我想要做的事情，在另一个屏幕上，您可以看到我实际拥有的内容。

chart.js@2.7.1中是否有任何选项可以添加这些元素？

第一张图片是我的目标。第二是实际的。 @编辑 这是我的chartOptions文件。我只是在函数中传递参数来获取这些选项。

import * as Chart from 'chart.js';

const getOptions = (
    beginAtZero: boolean,
    tickMax: number,
    tickStepValue: number,
    titleText: string,
    xAxesLabelString: string,
    yAxesLabelString: string,

): Chart.ChartOptions => {
    const ticks: Chart.LinearTickOptions =  {
        beginAtZero,
        fontColor: '#3C3750',
        fontFamily: 'Muli',
        fontSize: 10,
        fontStyle: 'bold',
        max: tickMax,
        stepSize: tickStepValue,
    };
    const options: Chart.ChartOptions = {
        legend: {
            display: false,
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: false,
                },
                scaleLabel: {
                    display: true,
                    fontColor: '#3C3750',
                    fontFamily: 'Muli',
                    fontSize: 10,
                    fontStyle: 'bold',
                    labelString: xAxesLabelString,
                },
                ticks,
            }],
            yAxes: [{
                display: true,
                gridLines: {
                    drawBorder: true,
                    tickMarkLength: 15,
                },
                scaleLabel: {
                    display: true,
                    fontColor: '#3C3750',
                    fontFamily: 'Muli',
                    fontSize: 10,
                    fontStyle: 'bold',
                    labelString: yAxesLabelString,
                },
                ticks,
            }],
        },
        title: {
            display: true,
            text: titleText,
        },
        tooltips: {
            backgroundColor: '#E4677B',
            callbacks: {
                label: (tooltipItem, data) => {
                    return 'Time: ' + data.datasets[0].data[tooltipItem.index];
                },
                title: (tooltipItem, data) => {
                    return '';
                },
            },
            custom: (tooltip) => {
                if (!tooltip) {
                    return;
                }
                // disable displaying the color box;
                tooltip.displayColors = false;
              },
        },
    };

    return {
        ...options,
    };
};

export default getOptions;

public createChart({room, roomState, chartOptions, chartDataset, chartLabels}: ILineChartProps) {
        const ctx = this.canvas.getContext('2d');

        this.myChart = new Chart(ctx, {
            data: {
                datasets: chartDataset,
                labels: chartLabels,
            },
            options: chartOptions,
            type: 'line',
        });
    }

Answer 1

在顶部添加一个xAxes，在右侧添加一个yAx，两者都不显示任何内容。

scales: {
        xAxes: [{
            /* Your xAxes options here */
        }, {
            position: 'top',
            ticks: {
                display: false
            },
            gridLines: {
                display: false,
                drawTicks: false
            }
        }],
        yAxes: [{
            /* Your yAxes options here */
        }, {
            position: 'right',
            ticks: {
                display: false
            },
            gridLines: {
                display: false,
                drawTicks: false
            }
        }]
    }

Answer 2

这对我有用。

scales: {
          xAxes: [
            {
             /* Your xAxes options here */
            },
            {
              position: 'top',
              ticks: {
                display: false
              },
              gridLines: {
                display: true,
                drawOnChartArea: false,
                drawTicks: false
              }
            }
          ],
          yAxes: [
            {
            /* Your yAxes options here */
            },
            {
              position: 'right',
              ticks: {
                display: false
              },
              gridLines: {
                display: true,
                drawOnChartArea: false,
                drawTicks: false
              }
            }
          ]
        }