2つのリストのデータを含むchart.js散布図を作成する方法

Question

2つのリストのデータを使ってchart.jsに散布図を作成したいとします。第1のリストからのデータはx値であるが、第2のリストからのデータはy値であると考えられる。

私は以下を試しましたが、動作しません。私の問題のための便利な解決策はありますか？

var myChart = new Chart(ctx, { 
    type: 'scatter', 
    data: { 
     datasets: [{ 
      label: 'Scatter Dataset', 
      data: [{ 
       x: pvols, # first list 
       y: prets # second list 
      }] 
     }] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
       type: 'linear', 
       position: 'bottom' 
      }] 
     } 
    } 
}); 

また、必要な形式に合わせてデータを再フォーマットする方法を知っていますか？散布図を使用するdocsから

おかげで、種類よろしく

マルセル

Answer 1

、データは、XとYプロパティを含むオブジェクトとして渡されなければなりません。

あなたは散布図で受け入れられるために、あなたが渡しているリストが正しい形式であることを確認する必要があり

すなわち

var data = [{ x: -8, y: 3 }, { x: 2, y: 8 }, { x: 3, y: 9 }]; 

私は、チャートに渡す1つのオブジェクトにあなたの二つのリストを結合します。 （ `聞かせCOORDS = pvols.map（（V、I）=>：

let coords = pvols.map((v,i) => ({ x: v, y: prets[i] })) 

その後、あなたのチャート

var data = [{ x: -8, y: 3 }, { x: 2, y: 8 }, { x: 3, y: 9 }]; 
 

 
var ctx = document.getElementById("chart"); 
 
var scatterChart = new Chart(ctx, { 
 
    type: "scatter", 
 
    data: { 
 
    datasets: [ 
 
     { 
 
     label: "Scatter Dataset", 
 
     data: data 
 
     } 
 
    ], 
 
    options: { 
 
     scales: { 
 
     xAxes: [ 
 
      { 
 
      type: "linear", 
 
      position: "bottom" 
 
      } 
 
     ] 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> 
 
<canvas id="chart" height="450" width="600"></canvas>