Question

您好我是JS的新手，正在寻找一种简单的方法来显示带有我自己的backgroundimage的自定义地图以及带有x-y坐标的几个点。

起初它使用＆＃34; line＆＃34; -chart-type of chart.js（v2.5）并禁用showScale（） - 选项和固定轴-max / min-values。 / p>

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

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

undefined

HTML：

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
                }
            },
        }
    });
}

以下是两张显示效果的图片：

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

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

我可以做些什么来获得适当的重新缩放（无论是windowsize还是启用/禁用的图例，点都应该始终显示在地图上的相同位置）？

Answer 1

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

解决图例问题的唯一方法是使用canvas外部的图例，因为图例会占用canvas中的空格，因此图表会水平压扁（没有分层） canvas中的概念。有关如何生成外部图例，请参阅this example。

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

图表js Backgroundimage Scaling

1 个答案: