Chart.js添加折线图周围的边框和yAxis单位标题([s])

要在Chart.js中为折线图添加周围的边框和y轴单位标题（例如[s]），请按照以下步骤操作：

添加周围的边框

在创建图表时，您需要在options对象中设置layout.padding属性来定义图表周围的边距。

const options = {
  layout: {
    padding: {
      top: 10,
      right: 10,
      bottom: 10,
      left: 10
    }
  }
};

您还可以通过设置options.plugins.legend.display为false来隐藏图例，如果不需要的话。

const options = {
  plugins: {
    legend: {
      display: false
    }
  }
};

添加y轴单位标题([s])

在options.scales.y对象中设置title属性来定义y轴的标题。

const options = {
  scales: {
    y: {
      title: {
        display: true,
        text: '[s]'
      }
    }
  }
};

完整示例

以下是一个完整的示例，展示了如何为折线图添加周围的边框和y轴单位标题([s])：

const ctx = document.getElementById('myChart').getContext('2d');

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      data: [65, 59, 80, 81, 56, 55, 40],
    },
  ],
};

const options = {
  layout: {
    padding: {
      top: 10,
      right: 10,
      bottom: 10,
      left: 10
    }
  },
  scales: {
    y: {
      title: {
        display: true,
        text: '[s]'
      }
    }
  },
  plugins: {
    legend: {
      display: false
    }
  }
};

const myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options,
});

此代码将在图表周围添加10像素的边框，并在y轴上添加单位标题[s]。您可以根据需要调整这些值。