Chart.js不是高度响应

我有问题可以让chart.js折线图对高度和宽度做出响应。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 
    });

来源

2017-08-03 Kévin Brun

他们说在[文档]（HTTP：//www.chartjs。 org/docs/latest/general/responsive.html）图表有麻烦与响应。希望你会找到解决方案，因为我不能 – blewherself

在文档中，他们建议将canvas标签包装到容器div中，并将其设置为自己的宽度和高度。基本上这就是你在他们提到的响应式expample中所做的。它有助于解决你的情况？ – blewherself

@blewherself它的工作！谢谢 –

至于从Docs为chart.js之它的建议，以帆布包裹到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>

来源

2017-08-03 14:00:30 blewherself

Chart.js不是高度响应

回答

相关问题