Настраиваемый размер шрифта Highchart Word Cloud

Question

Я наткнулся на официальную статью о высоких чартах , определяющую метод для нестандартного размера шрифта для облаков слов.

Может кто-нибудь помочь с тем, как реализовать эту DerveFont функциональность в реактивных старших диаграммах для настройки размера шрифта wordcloud?

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

require('highcharts/modules/wordcloud.js')(Highcharts);



    const Word = (props) => {

            const options = {
                series: [{
                    colors: ['#28B463', '#27AE60', '#186A3B', '#ABEBC6', '#73C6B6'],
                    type: 'wordcloud',             
                    data: props.positcloud, //passing the data from props
                    name: 'Count'
                }],
                title: {
                    text: ''
                },
                chart: {

                    height: 330,
                    margin: 15,
                    type: 'line'
                  },

            };

            return (
                <div>
                    {/* React wrapper for Highcharts */}
                    <HighchartsReact 
                    highcharts={Highcharts} 
                    constructorType={'chart'}
                    options={options} />
                </div>
            )
    }

    export default Word;

Answer 1

Способ определения нестандартного размера шрифта для серии wordcloud в React такой же, как и в статье.Вам необходимо переписать deriveFontSize метод в wordcloud прототипе:

import Highcharts from "highcharts";
import wordCloud from "highcharts/modules/wordcloud.js";
import HighchartsReact from "highcharts-react-official";

wordCloud(Highcharts);

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

Живая демоверсия: https://codesandbox.io/s/highcharts-react-demo-yz3t3