여러 요소 범례 플롯에 대한 자바 스크립트 라이브러리

Question

여러 요소가있는 플롯을 그리려합니다. 이러한 다양한 요소가 색상, 크기 및 산포 모양으로 구분되기를 바랍니다. 이러한 플롯의 예는 여기 https://github.com/slfan2013/tempPlot/blob/master/Rplot.png입니다.

비슷한 플롯을 그릴 때 자바 스크립트 라이브러리를 사용하고 싶습니다. 대개 플롯을 그리려면 plotly.js을 사용합니다. 그러나 나는 한 번에 하나의 요소 만 다룰 수 있다고 생각한다. 제 질문은 입니다 (색상, 크기 및 모양과 같은) 하나의 플롯에서 여러 요소를 중첩하여 처리 할 수 ​​있습니까? 그렇지 않다면, 자바 스크립트 라이브러리가 있다면 이것을 얻을 수 있습니까? CanvasJS는 어떻습니까?

#### EDIT.

나는 동일한 플롯에서 다른 색상과 크기 (모양 등)로 산포를 그리는 방법을 알고 있습니다. 그저 줄거리에 여러 요소의 전설이 있기를 원합니다. 예를 들어 "빨강"을 클릭하면 붉은 색 흩어짐이 어떤 크기이든 상관없이 숨길 것이고 "큰"크기를 클릭하면 큰 흩어짐 색상이 무엇이든 관계없이 숨길 수 있습니다.

감사합니다.

Answer 1

여러 개의 추적을 정의하고 각 추적마다 매개 변수를 개별적으로 설정하면됩니다.

• trace0
  는
• trace1 사용자 정의
• trace2은 사용자 정의 색상 및 사용자 정의 크기
• trace3을 가지고 색상이에게 사용자 정의 색상, 사용자 정의 크기 및 사용자 정의 기호가 단지 기본 설정입니다

var trace0 = { 
 
    x: [1, 2, 3], 
 
    y: [1, 2, 3], 
 
    type: 'scatter', 
 
    mode:'markers'}; 
 
var trace1 = { 
 
    x: [1, 2, 3], 
 
    y: [2, 1.8, 1], 
 
    type: 'scatter', 
 
    mode:'markers', 
 
    marker: { 
 
    color: 'red' 
 
    }}; 
 
var trace2 = { 
 
    x: [1, 2, 3], 
 
    y: [2.8, 2.3, 1.2], 
 
    type: 'scatter', 
 
    mode:'markers', 
 
    marker: { 
 
    color: 'green', 
 
    size: [10, 15, 20] 
 
    }}; 
 
var trace3 = { 
 
    x: [1, 2, 3], 
 
    y: [3, 2.5, 1], 
 
    type: 'scatter', 
 
    mode:'markers', 
 
    marker: { 
 
    color: 'pink', 
 
    size: [10, 15, 20], 
 
    symbol: 303 
 
    }}; 
 

 
Plotly.plot('myDiv', [trace0, trace1, trace2, trace3])

<div id='myDiv'></div> 
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Answer 2

이것은 CanvasJS에서 분산 형 차트를 사용하고 markerType 및 markerSize를 제어하여 수행 할 수 있습니다. 아래 표시된 예를 확인하십시오.

해당 페이지에서 markerType 및 markerSize를 참조하십시오.

http://canvasjs.com/docs/charts/chart-options/data/markertype/

http://canvasjs.com/docs/charts/chart-options/data/markersize/

var chart = new CanvasJS.Chart("chartContainer", 
 
{ 
 
\t title: { 
 
\t \t text: "Scatter Chart with Different Marker Types" 
 
\t }, 
 
\t legend: { 
 
\t  \t horizontalAlign: "right", 
 
\t  \t verticalAlign: "center" 
 
\t }, 
 
\t data: [ 
 
\t { 
 
\t \t type: "scatter", 
 
\t \t showInLegend: true, 
 
\t \t legendText: "Circle", 
 
\t \t dataPoints: [ 
 
\t \t \t { x: 1, y: 91, markerSize: 10 }, 
 
\t \t \t { x: 2, y: 75, markerSize: 20 }, 
 
\t \t \t { x: 3, y: 70, markerSize: 30 }, 
 
\t \t \t { x: 4, y: 85, markerSize: 40 }, 
 
\t \t \t { x: 5, y: 75, markerSize: 50 } \t \t \t 
 
\t \t ] 
 
\t }, 
 
\t { 
 
\t \t type: "scatter", 
 
\t \t markerType: "square", //default "circle" 
 
\t \t showInLegend: true, 
 
\t \t legendText: "Square", 
 
\t \t dataPoints: [ 
 
\t \t \t { x: 1, y: 71, markerSize: 10 }, 
 
\t \t \t { x: 2, y: 55, markerSize: 20 }, 
 
\t \t \t { x: 3, y: 50, markerSize: 30 }, 
 
\t \t \t { x: 4, y: 65, markerSize: 40 }, 
 
\t \t \t { x: 5, y: 55, markerSize: 50 } \t \t \t 
 
\t \t ] 
 
\t }, 
 
\t { 
 
\t \t type: "scatter", 
 
\t \t markerType: "triangle", 
 
\t \t showInLegend: true, 
 
\t \t legendText: "Triangle", 
 
\t \t dataPoints: [ 
 
\t \t \t { x: 1, y: 51, markerSize: 10 }, 
 
\t \t \t { x: 2, y: 35, markerSize: 20 }, 
 
\t \t \t { x: 3, y: 30, markerSize: 30 }, 
 
\t \t \t { x: 4, y: 45, markerSize: 40 }, 
 
\t \t \t { x: 5, y: 35, markerSize: 50 } 
 
\t \t ] 
 
\t }, 
 
\t { 
 
\t \t type: "scatter", 
 
\t \t markerType: "cross", 
 
\t \t showInLegend: true, 
 
\t \t legendText: "Cross", 
 
\t \t dataPoints: [ 
 
\t \t \t { x: 1, y: 31, markerSize: 10 }, 
 
\t \t \t { x: 2, y: 15, markerSize: 20 }, 
 
\t \t \t { x: 3, y: 10, markerSize: 30 }, 
 
\t \t \t { x: 4, y: 25, markerSize: 40 }, 
 
\t \t \t { x: 5, y: 15, markerSize: 50 } 
 
\t \t ] 
 
\t } 
 
\t ] 
 
}); 
 

 
chart.render();

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<div id="chartContainer" style="height: 300px; width: 100%;"></div>