Chart.js不支持高度响应式。

Question

我遇到了一个问题，就是无法让chart.js的折线图在高度和宽度上都具有响应式。

可以参考下面的示例：

• http://www.chartjs.org/samples/latest/charts/line/basic.html

这是我的代码：

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['January','February','March','April','May','June','July'],
    datasets : [
      {
        label: 'My First dataset',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }

  var options = {
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('canvas-1');
  var chart = new Chart(ctx, {
    responsive: true,
    type: 'line',
    data: lineChartData,
    options: options
  });

- Kévin Brun

---

他们在文档中说图表响应性存在问题。希望你能找到解决方案，因为我无法解决。 - Andrew

文档建议将画布标签包装到容器div中，并设置其自身的宽度和高度。基本上这就是他们响应式示例中的做法，你提到过。这样做能帮助解决你的问题吗？ - Andrew

@blewherself，它起作用了！谢谢。 - Kévin Brun

Answer 1

1. 创建类

.chart-container {
    position: relative;
    margin: auto;
    height: 80vh;
    width: 80vw;
}

2. 创建一个类为chart-container的div容器，并在其中放置canvas标签。

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

3. 图表选项，使用属性maintainAspectRatio设置为false：

options: {
    maintainAspectRatio: false,
    responsive: true,  
    ...
}

- Pravin Pagare

---

将选项中的两个项目（maintainAspectRatio和responsive）添加进去是解决我的问题的关键。 - Caveman

只是登录来点赞这个答案。我已经试图弄清楚它几个小时了。干得好！ - chadoulis

Answer 2

根据 Chart.js 的文档，建议将画布(canvas)包装在容器(div)中，并更改容器的宽度/高度。但基本上只是通过给定的宽度或高度进行更改。

从lannymcnie那里发现了一种更灵活的自定义解决方案，可用于任何画布的响应式设计。

var stage = new createjs.Stage("canvas");

var c = new createjs.Shape();
c.graphics.f("#f00").dc(0,0,50); // Drawn a 100x100 circle from the center

var t = new createjs.Text("Resize the browser/frame to redraw", "24px Arial bold", "#000");
t.x = t.y = 20;
stage.addChild(c, t);

window.addEventListener("resize", handleResize);
function handleResize() {
    var w = window.innerWidth-2; // -2 accounts for the border
    var h = window.innerHeight-2;
    stage.canvas.width = w;
    stage.canvas.height = h;
    //
    var ratio = 100/100; // 100 is the width and height of the circle content.
    var windowRatio = w/h;
    var scale = w/100;
    if (windowRatio > ratio) {
        scale = h/100;
    }
    // Scale up to fit width or height
    c.scaleX= c.scaleY = scale; 
    
    // Center the shape
    c.x = w / 2;
    c.y = h / 2;
        
    stage.update();
}
       
handleResize(); // First draw

html, body {
    padding: 0; margin: 0;
    overflow:hidden;
}
canvas {
    border: 1px solid #f00;
}

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

- Andrew

Answer 3

您可以使其具有响应性并设置不同的宽高比。我的问题是，在移动设备上，图表往往会被挤压在一起，几乎没有高度。

为了解决这个问题，使用chart.js 3.2.1时，我正在使用 AspectRatio 选项：

options: {          
   aspectRatio: 1, 
}

这样图表就是正方形并保持正方形，你可以尝试调整这个数字，通常在0.5到2之间找到适合两个显示器的比例。

- Sylhare