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