Canvas 此图上的折线图超出指定长度

Question

为什么这张图上的折线图超出了指定的长度。在 this 演示中，我有一个折线图，虽然我将 canvas 高度设置为 250，但高度会自动增长到 2355。如何控制折线图的高度？谢谢。

JS:

    var ctx2 = document.getElementById('lineChart').getContext('2d');
    var lineChart = new Chart(ctx2, {
        type: "line",
  data: {
    labels: [500, 600, 700, 750, 800, 850, 900, 950, 999, 050],
    datasets: [
      {
        data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
        label: "Infrastructure",
        borderColor: "#3e95cd",
        fill: false
      },
      {
        data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
        label: "CSI",
        borderColor: "#8e5ea2",
        fill: false
      },
      {
        data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
        label: "DevOps",
        borderColor: "#3cba9f",
        fill: false
      },
      {
        data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
        label: "Enterprise SIEM",
        borderColor: "#e8c3b9",
        fill: false
      },
      {
        data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
        label: "Bug Fix/Feature Request",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: "Ticket Trends"
    }
  }
});

Answer 1

添加 !important 属性

#barChart{
  height: 250px !important;
  width: 250px !important;
}

https://www.w3schools.com/css/css_important.asp

Canvas 此图上的折线图超出指定长度

Canvas line chart on this graph stretch beyond the assigned lengths

chart.js

chart.js3