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입니다.