在词云中禁用螺旋并在高图中显示所有词

Question

Highcharts 在版本 6 中引入了词云。

我正在尝试，我遇到了一些没有记录的问题

如何禁用螺旋性质并将其水平布局？
所有的字都没有显示出来。在下面的屏幕截图中，正好有 500 个单词。但是我看不到他们。
两边都有很多空 space。

我这个词云正好有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

更新
我通过编写自己的放置策略来禁用螺旋性质，如下所示。只是复制粘贴 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~~

第三，你可以使用chart.margin来减少space图表的外边缘和绘图区域

此演示展示了如何处理 ~~第二个和~~ 第三个

/*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 个单词。只有在字体很小的时候才会显示所有的字

Answer 2

解决方法 减少图两侧的空间（在这种特殊情况下）：

您可以使用负边距：

marginRight: -300,
marginLeft: -300

现场演示： http://jsfiddle.net/kkulig/eyuvcpLe/

Answer 3

highcharts 的最新版本解决了我的问题。但是我在highcharts打开的issue tracker还有其他问题。

在这里追踪 https://github.com/highcharts/highcharts/issues/7241

在词云中禁用螺旋并在高图中显示所有词

Disable spiral in word cloud and display all the words in highcharts

highcharts

word-cloud