绑定表到画布高度宽度

问题描述：

<canvas id="fisheye" width="100" height="100" style="border:1px solid;"></canvas>

这是JavaScript部分：

getChart: function() { 
     var ctx = document.getElementById("fisheye"); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["json1", "json2", "json3", "json4"], 
       datasets: [{ 
        label: '1.3.0 Version', 
        type: 'bar', 
        data: [52.4060092977, 90.0854057722, 196.576968515, 77.6216726434], 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(255, 99, 132, 0.2)' 
         // 'rgba(54, 162, 235, 0.2)', 
         // 'rgba(255, 206, 86, 0.2)', 
         // 'rgba(75, 192, 192, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(255,99,132,1)', 
         'rgba(255,99,132,1)', 
         'rgba(255,99,132,1)' 
         // 'rgba(54, 162, 235, 1)', 
         // 'rgba(255, 206, 86, 1)', 
         // 'rgba(75, 192, 192, 1)' 
        ], 
        borderWidth: 1 
       }, 
       { 
        label: '1.3.13 Version', 
        type: 'bar', 
        data: [50.0744953192, 93.5542439586, 153.288788005, 101.402897964], 
        backgroundColor: [ 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(54, 162, 235, 0.2)' 
         // 'rgba(255, 206, 86, 0.2)', 
         // 'rgba(75, 192, 192, 0.2)', 
         // 'rgba(153, 102, 255, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(54, 162, 235, 1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(54, 162, 235, 1)' 
         // 'rgba(255, 206, 86, 1)', 
         // 'rgba(75, 192, 192, 1)', 
         // 'rgba(153, 102, 255, 1)' 
        ], 
        borderWidth: 1 
       } 
       ] 
      }, 
      options: { 
       title: { 
        display: true, 
        text: 'Export Chart' 
       }, 
       legend: { 
        display: true, 
       }, 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true, 
          stepSize:50 
         } 
        }] 
       }, 
       responsive: true 
      } 
     }); 
     return myChart; 
    }

我的问题是，我的图表似乎扩大以全屏高度和宽度。我想将我的图表大小限制为画布大小。这样我就可以将图表放在一个网格中而不是每页（注意：我只显示了只有一个图表的代码，但您可以想象它与其他图表相似）

答

包装画布可能更容易在一个div/span /东西，并在那里设置大小。正如你已经设置了响应：true这意味着chart.js会尝试在调整大小时填充父项，并通过设置画布高度和宽度来完成此操作。 https://jsfiddle.net/zpvfph9m/1/

<div style="width:50%"> 
    <canvas id="fisheye" width="400" height="400"></canvas> 
</div>

请问

这对你的工作？

我该如何将数据集外部化为某个文件。这里有很多重复，我想在上面的代码中外部化数据块来分离文件。代码提示表示赞赏。我是新手为Javascript :( – katch

确定我外在使用另一个JavaScript我曾在同一的jsfiddle功能有加须藤代码（）{ 回报{ 数据：函数（）{VAR 数据= { ...} 回报数据 }，选择：函数（）{ \t VAR选项= { ... } 回报选项 } \t}} 在 – katch

理解你想要的挣扎了一下我这是怎么解释它。如果我想分开选项，数据和剩余配置g在3个不同的文件中，您可以在3个不同的js文件中创建它们，然后在将代码放到服务器/虚拟服务器上之前将它们连接到同一个文件。 f.exs。使用以下其中一个： http://stackoverflow.com/questions/301442/how-do-i-concatenate-javascript-files-into-one-file 然后你得到的源代码分开的优势，但你在浏览器中没有3个请求的性能损失。 –

绑定表到画布高度宽度

相关推荐