카테고리가있는 Highcharts Scatter Plot을 사용할 수 있습니까?

Question

하이 차트 v3.01

분산 된 음모를 사용하여 이름이 지정된 범주 내에서 점을 그리는 중입니다. 숫자는 실제로 숫자이지만 일련 번호가 없기 때문에 간격이 필요하지 않습니다.

라인 그래프 유형을 사용하면 효과적 일지 모르지만 잠재적으로 수백 개의 계열 및 분산 점이있는 것이 분명합니다.

편집 - 나는 설명 이미지를 게시 할 것입니다,하지만 분명히 나는 ​​명성 포인트가 필요합니다

내가 온 가장 가까운이있다. 한숨. 이는 x와 y를 참조 포인트를 사용 http://i117.photobucket.com/albums/o63/Harry_Flashman/close_zpsfe6d3ea2.png

data: [{x:108432,test:100,y:0}, {x:109802,test:100,y:51}, etc. ] 

내가 정확히 위와 같이하고 싶은,하지만 틈없이 :

여기를 참조하십시오.

비선형 틈이없는 축을 볼 수있는 유일한 방법은 이전에 다른 라인 유형 그래프에서 사용한 적이 있지만 결코 스 캐터 플롯을 사용하지 않는 범주입니다.

카테고리 배열에 x 축 유형 "카테고리"를 사용하는 경우, 하나의 분산 값을 각각에 할당하고 나머지는 오름차순 숫자 카테고리에만 할당합니다 (즉, 포인트 " 이름 "옵션). 다음과 같이 데이터 포인트와

xAxis: { 
    type: category, 
    categories: ['108432','109802','110240', etc. ] 
} 

는 :

data: [{name:'108432',test:100,y:0}, {name:'109802',test:100,y:51}, etc. ] 

은 다음과 같이 끝납니다. 각 스 캐터 포인트는 자체 범주를 갖습니다. 나는 그것을 작동시킬 수 있다면

http://i117.photobucket.com/albums/o63/Harry_Flashman/not_zps31aa4fef.png

감사 어떤 도움이 좋은 것입니다.

감사합니다.

pat

ps. 아래에 전체 차트 스크립트 (대용량 데이터 제외)를 추가했습니다. 이것은 거의 "작품"버전입니다.

$('#container').highcharts({ 
    chart: { type: 'scatter', zoomType: 'xy'  }, 
    title: { text: 'Revision vs Runtime Scatter' }, 
    subtitle: { text: 'L3 Performance Test'   }, 
    xAxis: { 
    title:  { enabled: true, text: 'Revision' }, 
    startOnTick: true, 
    endOnTick:  true, 
    showLastLabel: true, 
    showEmpty:  false, 
    legend:  { y: 120, floating: true, backgroundColor: '#FFFFFF' }, 
    labels:  { rotation: -90, align: 'right' }, 
    categories: ['101831','101849','101850','101857','101861','101866','101868','101878','101879','101880','101881','101882','101883','101884','101885','101888','101894','101900','101903','101905','101908','101913','101914'] 
    }, 
    yAxis:  { title: { text: 'Variance (%)' } }, 
    legend:  { layout: 'vertical' }, 
    plotOptions: { 
    scatter: { 
     marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, 
     states: { hover: { marker: { enabled: false } } }, 
     tooltip: { 
      headerFormat: '<b></b>', 
      pointFormat: '<b>Test {point.test}</b><br/>r{point.x}<br/>{point.y}% change<br/>{series.name}' 
     } 
     } 
    }, 
    series: [{ 
     name: 'PRd', 
     data: [{x:101857,test:267,y:0}, {x:101861,test:267,y:-1}, {x:101866,test:267,y:-0}, {x:101868,test:267,y:-1}, {x:101878,test:267,y:-1}, {x:101879,test:267,y:-1}, {x:101880,test:267,y:-0}, {x:101881,test:267,y:-0}, {x:101882,test:267,y:-0}, {x:101883,test:267,y:-0}, {x:101884,test:267,y:-0}, {x:101885,test:267,y:-0}, {x:101888,test:267,y:-0}, {x:101894,test:267,y:-1}, {x:101900,test:267,y:-0}, {x:101903,test:267,y:-0}, {x:101905,test:267,y:-1}, {x:101908,test:267,y:-1}, {x:101913,test:267,y:0}, {x:101914,test:267,y:1}, {x:101831,test:430,y:0}, {x:101849,test:430,y:1}, {x:101850,test:430,y:1}] 
     }, { 
     name: 'Non-PRd', 
     data: [{x:101831,test:100,y:0}, {x:101849,test:100,y:51}, {x:101850,test:100,y:51}, {x:101857,test:100,y:52}, {x:101861,test:100,y:49}, {x:101866,test:100,y:50}, {x:101868,test:100,y:50}, {x:101878,test:100,y:50}, {x:101879,test:100,y:50}, {x:101880,test:100,y:50}, {x:101881,test:100,y:50}, {x:101882,test:100,y:50}, {x:101883,test:100,y:50}, {x:101884,test:100,y:50}, {x:101885,test:100,y:50}, {x:101888,test:100,y:50}, {x:101894,test:100,y:50}, {x:101900,test:100,y:50}, {x:101903,test:100,y:0}, {x:101905,test:100,y:50}, {x:101908,test:100,y:51}, {x:101913,test:100,y:50}, {x:101914,test:100,y:50}, {x:101831,test:10937,y:0}, {x:101849,test:10937,y:2}] 
    }] 
    }); 
}); 

Answer 1

보통, 해결 방법을 통해 고정,

본질적 자바 스크립트 I의 범주는 상기 포인트 (PHP 통해 생성 속한 카테고리되는 관련 포인트 어레이의 위치를 ​​추가 한 오름차순으로 정렬). 관련 비트는 다음과 같습니다 :

xAxis: { 
    categories: ['r101831', 'r101849', 'r101850'] 
} 

plotOptions: { 
    tooltip: { 
    headerFormat: '<b></b>', 
    pointFormat: ' 
     <b>Test {point.test}</b><br/> 
     r{point.revision}<br/> 
     {point.y}% change<br/> 
     {series.name}' 
    } 
} 

series: [{ 
    name: 'PRd', 
    data: [ 
    {x:3,revision:101831,test:267,y:0}, 
    {x:4,revision:101849,test:267,y:-1}, 
    {x:5,revision:101850,test:267,y:-0} 
    ]} 
] 

최종 결과는 멋지게 보입니다. HighCharts를 좋아합니다.

여기에서 그림 : http://i117.photobucket.com/albums/o63/Harry_Flashman/fixed_zps9952d58d.png