チャートJS背景画像スケーリング

Question

こんにちは、私はJSに非常に新しいですし、私自身の背景画像とその上のx-y座標を持ついくつかの点でカスタムマップを表示する簡単な方法を探しています。

最初は無効showScale（）でchart.jsの「行」-chart型（V2.5）を使用して、非常にうまく機能 - オプションと固定軸-最大値/最小値。

私の問題は、私は、ウィンドウサイズまたはshow /チャートの凡例を非表示を変更したときに背景画像が適切に再スケーリングされていないということです。ここで

は、チャートを作成するための私の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：

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

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

：ここ

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

が効果を示す二つの画像です

適切なリスケールを得るにはどうすればよいですか（ポイントは常に、Windowsizeまたは有効/無効の凡例に関係なくマップ上の同じ位置に表示する必要があります）。

Answer 1

あなたがmaintainAspectRatioプロパティを使用してtrueに設定しようとしたことがありますか？うまくいけばウィンドウのサイズ変更の問題を修正するはずです。

伝説の問題を解決する唯一の方法は、伝説がそうチャートが水平に踏み付けているcanvasにスペースを取るのでcanvasの外部にある凡例を使用することです（canvasにはレイヤリングの概念はありません）。外部凡例の生成方法については、this exampleを参照してください。

あなたはlegendCallback財産と.generateLegend()プロトタイプメソッドを使用する必要があります。