自定义字体大小 Highchart 词云

Question

我发现了一篇 官方的 highcharts 文章，定义了词云自定义字体大小的方法。

任何人都可以帮助如何在react highcharts中实现deriveFont功能来调整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

在 React 中定义系列自定义字体大小的方法wordcloud与文章中相同。您需要覆盖原型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