图表js背景图像缩放答案

【问题标题】：Chart js Backgroundimage Scaling图表js背景图像缩放
【发布时间】：2017-03-28 09:27:40
【问题描述】：

您好，我是 JS 的新手，正在寻找一种简单的方法来显示自定义地图，其中包含我自己的背景图像和几个带有 x-y 坐标的点。

起初，它使用 chart.js (v2.5) 的“line”-chart-type 并禁用 showScale()-option 和固定 axes-max/min-values 效果很好。

我的问题是，当我更改窗口大小或显示/隐藏图表的图例时，背景图像没有正确重新缩放。

这是我创建图表的 JS 代码：

function initMap() {
    scatterChart = new Chart(document.getElementById("scatterChart"), {
        responsive: true,
        type: 'line',
        data: {
            /*datasets: [
                {

                }
            ]
            */
        },
        showScale: false,
        options: {
            scales: {
                yAxes: [{
                    display: false,
                    ticks: {
                        max: y_max,
                        min: 0,
                        stepSize: 0.1
                    }
            }],
                xAxes: [{
                    display: false,
                    type: 'linear',
                    position: 'bottom',
                    ticks: {
                        max: x_max,
                        min: 0,
                        stepSize: 0.1
                    }
            }]
            },
            onClick: function (evt) {
                var activePoint = scatterChart.getElementAtEvent(evt);
            },
            legend: {
                position: 'right',
                labels: {
                    fontSize: 15
                }
            },
        }
    });
}

HTML：

<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('media/map_background.jpg'); background-size: 100% 100%;"></canvas>

这里有两张显示效果的图片：

https://1drv.ms/i/s!As59C5Mmd0nahr1zP4rjwI5KobaM3Q

https://1drv.ms/i/s!As59C5Mmd0nahr10KwUCJ4wpvfn4_g

我可以做些什么来获得适当的重新缩放（无论窗口大小或启用/禁用图例如何，点都应始终显示在地图上的同一位置）？

【问题讨论】：

您能否提供您的数据集，以便我可以按照您的方式重新创建它？
同时上传您的背景图片。除非我有可以参考的示例，否则我无法提出解决方案。
这里你可以看到一个点的数据集截图：dataset-screenshot我在上面的帖子中还添加了两张图片显示效果。我希望这些信息足够了。
您是否尝试过使用maintainAspectRatio 属性并将其设置为true？这应该有望解决您的窗口调整大小问题。解决图例问题的唯一方法是使用canvas 外部的图例，因为图例占用了canvas 中的空间，因此图表被水平挤压（canvas 中没有分层概念） .请参阅this example 了解如何生成外部图例。您必须使用legendCallback 属性和.generateLegend() 原型方法。
这就是解决方案！谢谢！ :)

标签： javascript background-image chart.js scaling

【解决方案1】：

您是否尝试过使用maintainAspectRatio 属性并将其设置为true？这应该有望解决您的窗口调整大小问题。

解决图例问题的唯一方法是使用canvas 外部的图例，因为图例占用了canvas 中的空间，因此图表被水平挤压（@ 中没有分层概念987654326@)。请参阅this example 了解如何生成外部图例。

您必须使用legendCallback 属性和.generateLegend() 原型方法。

【讨论】：