안 단어 구름의 나선형 highcharts에있는 모든 단어를 표시

Question

Highcharts 도입 단어 구름 6.

나는 시도하고 있었고, 난 방법을 사용하지

• 을 설명하지 않은 몇 가지 문제에 직면 나선형 성격과 레이아웃을 수평으로?
• 모든 단어가 표시되지 않습니다. 아래 스크린 샷에는 정확히 500 단어가 있습니다. 그러나 나는 그들을 볼 수 없다.
• 양쪽에 빈 공간이 있습니다.

이 단어 구름에는 정확히 500 단어가 있습니다. 최소 체중이 5이고 각 추가 단어에 1을 더합니다. 따라서 가중치의 범위는 5에서 505 사이입니다.

이 작업을 시도했지만 사용하지 않았습니다.

Highcharts.seriesTypes.wordcloud.prototype.deriveFontSize = function(relativeWeight) { 
     var maxFontSize = 48; 
     // Will return a fontSize between 0px and 25px. 
     let size = Math.floor(maxFontSize * relativeWeight); 
     return size < 8 ? 8 : size; 
    }; 

나는 100 % 폭을 설정하지만 여전히 전체 영역

Updated Fiddle link

을 점유하지 않는

내가 쓰기로 나선 특성을 비활성화
UPDATE 내 자신의 배치 전략은 아래와 같습니다. Highcharts 원래 예제와 회전 사용 안 함 복사하기.

var getRandomPosition = function getRandomPosition(size) { 
     return Math.round((size * (Math.random() + 0.5))/2); 
}; 

var randomPlacement = function randomPlacement(point, options) { 
    var field = options.field, 
     r = options.rotation; 
    return { 
     x: getRandomPosition(field.width) - (field.width/2), 
     y: getRandomPosition(field.height) - (field.height/2), 
     rotation: 0 
    }; 
} 

Highcharts.seriesTypes.wordcloud.prototype.placementStrategy.randomHorizontal = randomPlacement; 

또한 여백도 설정합니다. 하지만

marginRight: 0, 
marginLeft: 0 
marginBottom: 0 

Answer 1

두 번째 및에 주소 도움이되지 않았다 번째

이 차트에있는 모든 단어가 있지만 일부는 매우 작은 크기에 표시하기 어려운 두 번째. 여기에 내가 deriveFont

셋째을 사용하면 차트의 공간 바깥 쪽 가장자리와 그림 영역이 데모는 두 번째 및 세 번째

/*Object.keys(data).map(function(key) { 
    data[key].name=key 
});// just for demo to show 500 words populating*/ 
Highcharts.seriesTypes.wordcloud.prototype.deriveFontSize = function(relativeWeight) { 
     var maxFontSize =10; 
     // Will return a fontSize between 0px and 25px. 
     let size = Math.floor(maxFontSize * relativeWeight); 
     return size < 8 ? 15 : size; //sets min size to be 15 if less than 8 
    }; 
Highcharts.chart('container', { 
chart: { 
    "type": "wordcloud", 
     margin: [20, 0, 0, 0] 
    }, 
    "series": [{ 

    "data": data, 
    "placementStrategy": 'random' 
    }], 
    "title": { 
    "text": "WORD CLOUD" 
    } 
}); 

Fiddle에 대처하는 방법을 보여줍니다

을 줄이기 위해 chart.margin을 사용할 수 있습니다 데모

업데이트

모든 500 단어가 표시되지 않습니다. 글꼴 크기가 아주 작은 경우에만 모든 단어가 표시됩니다.(이 특정 경우) 플롯의 양쪽에 공간을 줄이기위한

Answer 2

해결 :

marginRight: -300, 
marginLeft: -300 

라이브 데모 :http://jsfiddle.net/kkulig/eyuvcpLe/