chart.jsを混在させた散布図

Question

chart.jsに散布図を作成しようとしていますが、線グラフとバブルチャートを混ぜて、あるデータの分散と予測計算の「理想」モデル。

私はscalesを使ってxAxesを散らし、直線（「理想」を表す）を作っています。問題はバブルチャートにあり、バブルのデータは正確にはライン上にあることはできませんが、技術的には（理論的には）不可能ですが、それらは「理想」ラインを正確に超えています。 dummieデータとcodepenで遊び場で

var chart = new Chart(ctx, { 
    type: 'bubble', 
    data: { 
     labels: makeLabels().labels, 
     datasets: [ 
     { 
      type: 'line', 
      label: 'Data', 
      data: makeLabels().labels, 
      fill: false, 
      backgroundColor: "rgba(218,83,79, .7)", 
      borderColor: "rgba(218,83,79, .7)", 
      pointRadius: 0 
     }, 
     { 
      type: 'bubble', 
      label: 'Data2', 
      data: makeBubbles(), 
      backgroundColor: "rgba(76,78,80, .7)", 
      borderColor: "transparent" 
     } 
     ] 
    }, 
    options: { 
    scales: { 
     xAxes: [{ 
     type: 'linear', 
     position: 'bottom', 
     ticks: { 
      min: 0, 
      max: Math.max(...makeLabels().array) 
     } 
    }] 
    } 
    } 
}); 

そしてhere is the complete code：ここ

は、チャートのための私のコード例です。

とにかく、これは実際の結果である：

、これは予想される結果である：線の位置は、キャプチャ中に（チャート無関係である

同じデータでプロットされていない）が、私が望むのは気泡を分散させることです。

¿どのようにそれを達成するためのアイデアですか？

Answer 1

あなたのポイントが直線的に出てくる理由は、各データポイントのxとyの値が同じであるようにmakeBubbles()に設定しているためです。この結果、直線的に配置された点が得られます。

点を散らばって取得するには、線形パターンにならない点を使用してください。私が何を意味するかを実証するために、xとyの値が等しくないように、あなたのmakeBubbles()関数を修正しました。今、あなたは非常に広範囲に分散しています。

arr = arr.map(function(item, i) { 
    return {x: item, y:arr[i - 1]} 
}); 

ここにはexampleがあります。