Question

我遇到一个official highcharts article，它定义了用于wordcloud的自定义字体大小的方法。

任何人都可以在如何响应highcharts以调整wordcloud字体大小的过程中帮助实现此 deriveFont 功能吗？

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

自定义字体大小Highchart词云

1 个答案: