Question

我正在尝试使用chart.js创建缩略图，该缩略图将链接到包含完整图表的页面。链接页面上的完整图表看起来不错，但对于缩略图我无法正确调整大小。画布覆盖右侧区域，但图形不会垂直填充。

$(document).ready(function () {
    var numero = 10;
    var clicked = 1;

    $("#sq").click(function(){
        clicked = 1;
    });
     $("#lg-sq").click(function(){
        clicked = 2;
    });
     $("#thumb").click(function(){
        clicked = 3;
    });
     $("#small").click(function(){
        clicked = 4;
    });
     $("#mid").click(function(){
        clicked = 5;
    });

    $("#apagar").click(function () {
        $("#results").html('');
    });

    $('#pesquisar').click(function () {
        $("#results").html('');
        $.ajax({
            url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search',
            dataType: 'xml',
            data: {
                api_key: '2fd41b49fedfd589dc265350521ab539',
                tags: $("#tag").val(),
                format: 'rest'
            },
            success: sucessHandler,
            error: errorHandler

        });

        function sucessHandler(data) {
            $("#results").html('');
            var fotos = Array.prototype.slice.call( $(data).find("photo"));

            if ($("#numero").val() != "") {
                numero = parseInt($("#numero").val());
                console.log("entrou");
            }

            fotos.forEach(function(foto,key) {
                if(key < numero){
                $.ajax({
                    url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes',
                    dataType: 'xml',
                    data: {
                        api_key: '2fd41b49fedfd589dc265350521ab539',
                        photo_id: $(foto).attr('id'),
                        format: 'rest'
                    },
                    success: function(dataSize){
                         var farmId = $(foto).attr('farm');
                         var serverId= $(foto).attr('server');
                         var Id = $(foto).attr('id');
                         var secret = $(foto).attr('secret');
                         var src = "https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + Id + "_"+secret+".jpg";

                          $.ajax({
                            url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo',
                            dataType: 'xml',
                            data: {
                                api_key: '2fd41b49fedfd589dc265350521ab539',
                                photo_id: $(foto).attr('id'),
                                format: 'rest',
                                secret: secret
                            },
                            success: function(dataInfo){
                                 if(clicked == 1){
                              var size = dataSize.getElementsByTagName('size')[0];
                              var title = dataInfo.getElementsByTagName('title')[0];
                              console.log(title);
                              var width = $(size).attr("width");
                              var height = $(size).attr("height");
                              $('#results').append("<img src ="+src+" width="+width+" height="+height+">"+title);

                         }

                         if(clicked == 2){
                             var size = dataSize.getElementsByTagName('size')[1];
                             var width = $(size).attr("width");
                             var height = $(size).attr("height");
                              $('#results').append("<img src ="+src+" width="+width+" height="+height+">");
                         }


                         if(clicked == 3){
                             var size = dataSize.getElementsByTagName('size')[2]
                             var width = $(size).attr("width");
                             var height = $(size).attr("height");
                              $('#results').append("<img src ="+src+" width="+width+" height="+height+">");
                         }

                         if(clicked == 4){
                             var size = dataSize.getElementsByTagName('size')[3]
                             var width = $(size).attr("width");
                             var height = $(size).attr("height");
                              $('#results').append("<img src ="+src+" width="+width+" height="+height+">");
                         }

                         if(clicked == 5){
                             var size = dataSize.getElementsByTagName('size')[4]
                             var width = $(size).attr("width");
                             var height = $(size).attr("height");
                              $('#results').append("<img src ="+src+" width="+width+" height="+height+">");
                         }
                            },
                            error: function(req,status,err){

                            }
                          });  

                    },
                    error: errorSize

                });
                }
            });

                function errorSize(req, status, err) {
                    console.log("error size");
                }

        }

        function errorHandler(req, status, err) {
            console.log("fail");
        }
    });
});

我尝试过调整画布的最小高度但会导致条纹模糊。有什么方法可以调整条的高度来占据整个画布吗？

Answer 1

尝试设置以下选项：

options: {
  responsive: true,
  maintainAspectRatio: false
}

如果将maintainAspectRatio设置为true，则会自动计算高度。

Answer 2

实际上在 Chart.js 3.2.1 中更新纵横比以向您的方案添加更多高度，您可以使用 aspectRatio 选项：

options: {          
   aspectRatio: 1, 
}

根据文档：

<块引用>

画布纵横比（即宽度/高度，值为 1 表示方形画布）。请注意，如果高度明确定义为属性或通过样式定义，则此选项将被忽略。

你可以这样设置：

1 使其成为方形
0.5 高度是宽度的两倍
2 的宽度是高度的两倍

Answer 3

const config = {
  type: 'bar',
  data,
  options: {
      responsive: true,
      maintainAspectRatio: false
  }
};
var yourChart= new Chart(
    document.getElementById('chartCanvas'),
    config
  );
});
yourChart.canvas.parentNode.style.height = '480px'; 
yourChart.canvas.parentNode.style.width = '280px';

Chart.js纵横比/强制高度

3 个答案: