2017-10-06 72 views
0

Highcharts介紹詞雲6.禁用螺旋和highcharts顯示所有的話

我嘗試了,我面對它沒有記錄

  • 如何禁用幾個問題螺旋性質和水平佈局?
  • 所有單詞都未顯示。在下面的截圖中,恰好有500個單詞。但我看不到他們。
  • 很多人的任何一方的空間。

我在這個詞雲中恰好有500個單詞。最小權重爲5,併爲每個附加單詞添加一個。所以權重範圍從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

enter image description here

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 

回答

0

尋址到秒和第三

其次有圖表中的所有單詞,但有些是非常小的尺寸很難看。這裏我用deriveFont

三,你可以使用chart.margin減少圖表的空間外邊緣和繪圖區

這個演示展示瞭如何處理秒和第三

/*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演示

更新

它不顯示全部500個單詞。只有在字體非常小的情況下,它纔會顯示所有文字。爲減輕情節的兩側的空間(在這種特殊情況下)

+0

chart.margin在一定程度上有所幫助。但嘗試調整圖表區域的窗格的大小,使其更寬一些。即使我們保留了保證金並且保證金爲零,您仍會看到仍然有很多空白。 –

0

解決方法

可以使用負邊距:

marginRight: -300, 
marginLeft: -300 

現場演示:http://jsfiddle.net/kkulig/eyuvcpLe/

+0

我不能使用負的絕對邊距...我們使用百分比和不同的屏幕尺寸邊距應該是不同的。所以這是行不通的 –