设置宽度和高度

Question

我正在尝试使用Chart.js文档中给出的示例代码。

画布元素上行内指定了宽度和高度为400px / 400px。

但是当渲染图表时，它会被放大到整个页面宽度，并且切掉最右边的部分。

我应该在哪里/如何控制图表的宽度/高度？

- Fellow Stranger

---

不要规避规则以发布 CodePen 的链接；请遵循规则并包含 [mcve]。 - TylerH

Answer 1

你可以重写画布的样式宽度 !important ...

canvas{

  width:1000px !important;
  height:600px !important;

}

还需在选项下指定responsive:true属性。

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

更新选项中添加：maintainAspectRatio: false，

链接：http://codepen.io/theConstructor/pen/KMpqvo

- KpTheConstructor

---

谢谢，你的“maintainAspectRatio: false”让图表变得可见了。但是仍然会裁剪右侧。在使用他们自己的基本示例代码时遇到这种问题让我开始怀疑chart.js是否是一个好的选择。（右侧仍被裁剪...） - Fellow Stranger

这解决了图形大小的问题，图形没有按比例缩放。有没有一种方法可以在Chart.js内设置图形大小？ - Firix

原文：Turns out that you need to turn off responsive to make the graph obey the sizes given to it. Shame that there doesn't seem to way to control it and maintain the responsive nature...翻译：原来需要关闭响应式功能才能让图表按照给定的尺寸显示，可惜似乎没有方法可以同时控制和保持响应式特性... - Firix

使用“！important”并不是解决这个问题的正确方式，尽管它可以工作。@Nicolas提供的“将画布包装在div中”的解决方案是更好的方式，因为我们可以控制以我们想要的方式调整画布的大小。 - Abhishek Boorugu

对上面的方法点个赞。不要使用这种方法，如果你强制指定画布大小，它看起来不太对。请使用@Nicolas下面的解决方案。 - BlueVoid

canvas{ width:100% !important; height:600px !important; } 和 maintainAspectRatio: false, 解决了我的问题。谢谢。 - Kamlesh

Answer 2

根据官方文档（http://www.chartjs.org/docs/latest/general/responsive.html#important-note），您还可以简单地使用容器来包围图表

HTML

<div class="chart-container">
   <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
   width: 1000px;
   height:600px
}

并带有选项

responsive: true
maintainAspectRatio: false

- Nicolas

---

这个可行。关键在于使用一个外部 div 并在其上设置宽度和高度，而不是在 canvas 元素上设置。 - John Doherty

为了使这个工作正常，chart-container 应该是相对定位的。 - Sanju

在 Angular 项目中，对我来说只有使用 !important 才有效。 - Артур Гудиев

Answer 3

在我的情况下，在选项下传递 responsive: false 解决了问题。我不确定为什么每个人都告诉你做相反的事情，特别是因为 true 是默认值。

注：原文中的代码标签已被保留。

- Antimony

---

一样的问题。将 responsive: true 设置为真完全扭曲了图表的外观。 - Paul

在我的Angular项目中，只有在使用!important时才对我有效。 - Артур Гудиев

Answer 4

我无法相信没有人提到使用相对定位的父元素。

代码：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

来源：官方文档

- R. Gurung

---

值得注意的是，由于某种原因，需要设置width和height，不能像我一开始尝试的那样只设置height。 - Chud37

这似乎是唯一一个不会影响图表响应性的解决方案。谢谢！ - sk311

Answer 5

你可以根据需求更改aspectRatio：

options:{
     aspectRatio:4 //(width/height)
}

- Yashvendar Badsiwal

---

你能澄清一下这是如何工作的吗？4不是一个宽高比。你的评论中写着(width/height)，但不清楚应该如何应用。有没有一种方法可以将其作为一组传递？或者你是真的意思是将建议的宽度除以建议的高度，例如3:4变成0.75？ - Jeremy Caney

工作但不知道怎么做。顺便解决了我的问题。 - Muhammad Ahsan

Answer 6

这在我的情况下有所帮助：

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

- Omid N

Answer 7

虽然上面没有提到，但在画布元素上使用max-width或max-height也是一种可能性。

- Ukuser32

Answer 8

以下内容对我有用 - 但不要忘记将其放在“选项”参数中。

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

- Dazeh

Answer 9

使用这个，它很好用。

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

并且在选项下面，

responsive:true,

- Udara Herath

Answer 10

你可以创建一个 div 来包裹 canvas 标签，

    <div class="wrap">
     <canvas id="myChart"></canvas>
    </div>

    .grafico{
      width: 400px !important;
    }

JS图表选项的任何更改

var myChart = new Chart(ctx, {
    type: 'bar', //doughnut, bar, line, radar, pie, polarArea
    data: data,
    options: {

      scales: {
        y: {
          beginAtZero: true,
          stepSize: 1
        }

      }
    },
  });
};

- esleyder ordoñez

---

你的回答与这个回答有何不同？ - Janez Kuhar