图表js Backgroundimage Scaling

Question

Hi i'm quite new to JS and looking for an easy way to show a custom map with my own backgroundimage and several points with xy-coordinates on it.

At first it worked quite well using the "line"-chart-type of chart.js (v2.5) with disabled showScale()-option and fixed axes-max/min-values.

My problem is that the backgroundimage is not rescaling properly when i change the window-size or show/hide the legend of the chart.

Here is my JS-code for creating the chart:

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>

Here are two images showing the effect:

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

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

What can i do to get a proper rescaling (points should always be shown on the same position on the map regardless of windowsize or enabled/disabled legend)?

Answer 1

Have you tried using the maintainAspectRatio property and setting it to true ? That should hopefully fix your window resize issue.

The only way to fix the legend issue is to use a legend that is external to the canvas because the legend takes up space in the canvas so the chart is squished horizontally (there is no layering concept in a canvas ). See this example for how to generate an external legend.

You must use the legendCallback property and the .generateLegend() prototype method.