響應圖表

Question

我試圖做響應圖表...我用這個，但它沒有響應，只是當我刷新頁面縮放到正確的寬度...然後我有任何其他的想法？

，我嘗試設置與viewBox和preserveAspectRatio。但同樣的結果div ..

var graph = new Rickshaw.Graph({ 
 
    element: document.querySelector("#chart"), 
 
    height: 100, 
 
    series: [{ 
 
     color: '#1abc9c', 
 
     data: [ 
 
      { x: 0, y: 50 }, 
 
      { x: 1, y: 50 }, 
 
      { x: 2, y: 40 }, 
 
      { x: 3, y: 40 }, 
 
      { x: 4, y: 30 }, 
 
      { x: 5, y: 20 }, 
 
      { x: 6, y: 0 }, 
 
      { x: 7, y: 0 } ] 
 
    }] 
 
}); 
 
    
 
graph.render(); 
 

 
var svg = d3.select('.chart-container').append("svg") 
 
    .attr("width", '100%') 
 
    .attr("height", '100%') 
 
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
 
    .attr('preserveAspectRatio','xMinYMin') 
 
    .append("g") 
 
    .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")");

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

Answer 1

好感謝馬克儀。解決方法是在這裏：

var seriesData = [ [ 
 
      { x: 0, y: 50 }, 
 
      { x: 1, y: 50 }, 
 
      { x: 2, y: 50 }, 
 
      { x: 3, y: 40 }, 
 
      { x: 4, y: 40 }, 
 
      { x: 5, y: 20 }, 
 
      { x: 6, y: 0 }, 
 
      { x: 7, y: 0 } ] ]; 
 
var graph = new Rickshaw.Graph({ 
 
\t element: document.getElementById("chart"), 
 
\t renderer: 'area', 
 
\t series: [ 
 
\t \t { 
 
\t \t \t data: seriesData[0], 
 
\t \t \t color: '#1abc9c' 
 
\t \t } 
 
\t ] 
 
}); 
 
var resize = function() { 
 
\t graph.configure({ 
 
\t \t width: window.innerWidth * 0, 
 
\t \t height: window.innerHeight * 0.20 
 
\t }); 
 
\t graph.render(); 
 
} 
 
window.addEventListener('resize', resize); 
 
resize();

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.js"></script> 
 

 

 
<div id="chart"></div>