Chart.js没有高度响应 [英] Chart.js not height responsive

问题描述

我有一些问题要让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']，
数据集： [
 {
 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：'＃ff'，
数据：[randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（）] 
} 
] 
} 
 
 var options = {
 maintainAspectRatio：false，
 legend：{
 display：false，
}，
 scale：{
 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 
 }）; 
  

解决方案

从 Docs 建议将canvas包装到容器div中并更改容器的宽度/高度。但基本上它是按给定的宽度或高度改变的。

从 lannymcnie 中找到更灵活的自定义解决方案a>可用于任何画布响应：

  var stage = new createjs.Stage（canvas）; var c = new createjs.Shape（）; c.graphics.f（＃f00）。dc（0,0,50）; //从centervar t = new createjs.Text（调整浏览器/框架大小以重绘，24px Arial粗体，＃000）绘制100x100圆圈; tx = ty = 20; stage.addChild（c， t）; window.addEventListener（resize，handleResize）; function handleResize（）{var w = window.innerWidth-2; // -2占边界变量h h = window.innerHeight-2; stage.canvas.width = w; stage.canvas.height = h; // var ratio = 100/100; // 100是圆形内容的宽度和高度。 var windowRatio = w / h; var scale = w / 100; if（windowRatio> ratio）{scale = h / 100; } //向上缩放以适合宽度或高度c.scaleX = c.scaleY = scale; //将形状居中c.x = w / 2; c.y = h / 2; stage.update（）;} handleResize（）; //首先绘制 

  html，body {padding：0;保证金：0; overflow：hidden;} canvas {border：1px solid＃f00;}  

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

I have issues to get the chart.js line chart to be responsive on the height aswell as the width.

See example what it should be working like: http://www.chartjs.org/samples/latest/charts/line/basic.html

Here is my code:

  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
  });

解决方案

As from Docs for Chart.js it's recommended to wrap canvas into container div and change width/height of the container. But basically it's changing either by given width or height.

Found a more flexible custom solution from lannymcnie that can be used for any canvas responsiveness:

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>

这篇关于Chart.js没有高度响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！