Question

有没有办法在hightcharts jquery中更改图表的字体大小？我已经尝试过fontsize选项，但它根本不起作用..

我试图使图例字体更小，以便它可以适合购物车，如果图例长，则不会创建新行。也许有人试过吗？

这是我的剧本：

options = {

                   chart: {

                    backgroundColor: {

                    linearGradient:[0, 0, 500, 500],

                    stops: [

                        [0, 'rgb(255,255,255)'],

                        [1, 'rgb(237,236, 250)']]},

                    type:    tGraf,

                    renderTo: contGrafik,

                    defaultSeriesType: 'column',

                    width: sWidth

                   },

                   title: {

                      text: 'Human Resources',

                      style: {

                            font: 'normal 14px Verdana, sans-serif',

                            color : 'black'

                        }

                   },

                    subtitle: {

                        text: '',

                        style: {

                            font: 'normal 11px Verdana, sans-serif',

                            color : '#000099'

                        }

                    },

                   xAxis: {

                    title: {

                        text : ''

                    },

                    labels: {

                        rotation: 0,

                        align: 'right',

                        style: {

                            font: 'normal 11px Verdana, sans-serif',

                            color : 'black'

                        }

                     },

                   },

                   yAxis: {

                        allowDecimals : false ,

                       labels: {

                        align: 'right',

                            style: {

                                font: 'normal 11px Verdana, sans-serif',

                                color : 'black'

                            }

                        },

                        gridLineColor: '#EEEFE1',

                        title: {

                            text: 'Employees',

                            style: {

                                font: 'normal 13px Verdana, sans-serif',

                                color : 'black'

                            }

                        }

                   },

                    plotOptions: {

                    column: {

                        dataLabels : {

                            enabled : true,

                            formatter: function() {

                                 return this.y;

                              }

                            },

                        cursor: 'pointer'

                        }},

                    legend: {

                        itemWidth : uLegend, 
                        style: {

                                font: 'normal 5px Verdana, sans-serif',

                                color : 'black',

                            }

                        symbolPadding: 2,

                        symbolWidth: 15,

                        backgroundColor: '#FFFF99',

                        itemStyle: {

                            cursor: 'pointer',

                            color: '#3E576F'

                        },

                        width: 600,

                        align: 'center',

                        layout: 'horizontal'},

                    tooltip: {

                      formatter: function() {

                         return '<b>'+ this.series.name +'</b><br/>'+this.y + ' Orang';

                      }

                   }

                };

Answer 1

您可能正在寻找传奇的itemStyle选项：

legend: {
    itemStyle: {
        color: '#000000',
        fontWeight: 'bold',
        fontSize: '8px'
    }
}

Answer 2

我确信Igor给出的答案很好，但是如果你想一次性更改图表中每个地方的文本，只需打开highchart.js文件并在那里放置所需的字体样式。只提供我在我的案例中所做的修改：

style:{fontFamily:' "Exo 2", sans-serif',fontSize:"12px"},backgroundColor:"#FFFFFF"

我已经改变了＃Luc;＆＃34;到＆＃34; Exo 2＆＃34;。：）

Answer 3

https://www.sitepoint.com/auto-text-fill-resize-plugins/

查看此网站，你会发现5种使用jquery调整大小的方法，我已经尝试了第一个，它已经有效了

更改字体大小Jquery Highcharts

3 个答案: