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

responsive = false不工作

2 个答案: