responsive = false不工作

Question

我試圖顯示幾個圖表，但我有兩個主要的，我可以使用一些幫助。第一個，responsive = false似乎沒有工作，因爲每當我加載圖表，它使圖表更大，第二個是我的懸停工具提示似乎無法正常工作。

這裏是我的表的代碼如下所示：

var ctx = document.getElementById("myChart").getContext("2d"); //this.$refs.canvas 

var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels: ["Checked", "Un-Checked"], 
     datasets: [{ 
     label: '# of Hits', 
     data: [1000, 500], 
     backgroundColor: [ 
      'rgba(54, 162, 235, 0.2)', 
      'rgba(255, 206, 86, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)' 
     ], 
     borderWidth: 1 
     }] 
    }, 
    options: { 

     responsive: false 

    } 
}); 

Answer 1

給myChart一個固定的寬度，如：

<div id="myChart" style="width:200px;"></div> 

這對我的作品。

Answer 2

檢測畫布大小更改的時間不能直接從CANVAS元素完成。 Chart.js使用其父容器來更新畫布渲染和顯示大小。但是，此方法要求容器相對定位，並且只專用於圖表畫布。響應然後可以通過對容器大小

源設置相對值來實現：http://www.chartjs.org/docs/latest/general/responsive.html