2014-07-21 5 views
1

항목에받은 등급 1 - 5 (1 별, 2 별 등)의 수를 보여주는 차트가 있습니다. 제대로 표시 할 수 없습니다. 그래프.다른 계열의 하이 차트 동일한 유형의 데이터

Output

어떻게 내가 그렇게 볼 수 있지만, 모든이있을 수 있습니다 : 여기

$('#chartdiv').highcharts({ 
    chart: { 
     type: "column" 
    }, 
    title: { 
     text: 'My Ads' 
    }, 
    xAxis: { 
     categories: ["1 Star", "2 Stars", "3 Stars", "4 Stars", "5 Stars"], 
     tickInterval: 1, 
     labels: { 
      rotation: -20, 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
    }, 
    yAxis: { 
     "min": 0, 
     "title": { 
      "text": "Number of Ratings" 
     } 
    }, 
    series: [{ 
     "name": "1 Stars", 
     "data": [10] 
    }, { 
     "name": "2 Stars", 
     "data": [42] 
    }, { 
     "name": "3 Stars", 
     "data": [60] 
    }, { 
     "name": "4 Stars", 
     "data": [110] 
    }, { 
     "name": "5 Stars", 
     "data": [100] 
    }], 
    tooltip: { 
     //shared: true, 
     crosshairs: false 
    }, 
    series: series, 
}); 

그리고 그것은 모습입니다 : 이것은 내가 디스플레이를 얻기에 온 가장 가까운 라벨? 나는 또한이 같은 데이터 집합 사용하여 시도했다 :

[{ 
    "data": [10, 0, 0, 0, 0] 
}, { 
    "data": [0, 42, 0, 0, 0] 
}, { 
    "data": [0, 0, 60, 0, 0] 
}, { 
    "data": [0, 0, 0, 110, 0] 
}, { 
    "data": [0, 0, 0, 0, 100] 
}], 

을 그리고 내가이이 같은 표시 얻을 수있는 방법 그러니까 기본적으로, 나에게 사람들은 너무 멀리 이격되어

Graph 2

이 출력을 제공합니다 첫 번째 이미지가 있지만 각 데이터 세트에 하나의 항목이 있습니까?

------------
업데이트 :
------------

이 시리즈는 나를 위해 작동합니다. 내가 가지고있는 유일한 문제는 툴팁에 Series 1: 10이라고 말합니다 (이미지가 약간 희미합니다. 죄송합니다).

Graph 3

"series": [{ 
     "data": [{ 
       "name": "1 Star", 
       "y": 10 
      }, { 
       "name": "2 Stars", 
       "y": 42 
      }, { 
       "name": "3 Stars", 
       "y": 60 
      }, { 
       "name": "4 Stars", 
       "y": 110 
      }, { 
       "name": "5 Stars", 
       "y": 100 
      }] 
    }], 
+1

'내가 가진 유일한 문제는 시리즈 1 : 10의 툴팁입니다. '- 무엇을 말하고 싶습니까? – Mark

+0

툴팁에서 다음 중 어느 값을 사용해야합니까? –

답변

1

당신은 이러한 설정을 사용하려고 할 수 있습니다 (pointWidth 함께 플레이하는 것을 시도하십시오 - 열의 폭)

 plotOptions: { 
      series: { 
       pointPadding: 0.2, 
       groupPadding: 0, 
       pointWidth: 50//width of the column 
      }, 
      column: { 
         pointPadding: 0, 
         borderWidth: 0 
        } 
     }, 
    tooltip: { 
     formatter: function() { 
     return 'The value for <b>' + this.x + '</b> is <b>'+ '</b>, in series '+ this.series.name; 
    } 

업데이트 - 내가 추가 한 사용자 지정 도구 설명

+0

내 문제를 업데이트했습니다. 제발보십시오 –

+0

@RyanNaddy 내 대답을 업데이트했습니다. 사용자 정의 "툴팁"을 사용해야합니다. 제 코드를 다시보십시오. – Oyeme

0

I 이 시리즈를 사용하여 찾고있는 것을 얻을 수있었습니다 :

"series": [{ 
     "name": "Number of Ratings", 
     "data": [{ 
       "name": "1 Star", 
       "y": 10 
      }, { 
       "name": "2 Stars", 
       "y": 42 
      }, { 
       "name": "3 Stars", 
       "y": 60 
      }, { 
       "name": "4 Stars", 
       "y": 110 
      }, { 
       "name": "5 Stars", 
       "y": 100 
      }] 
    }], 
관련 문제