Изменить размер шрифта Jquery Hightcharts - PullRequest
3 голосов
/ 09 августа 2011

Есть ли способ изменить размер шрифта диаграммы в hqucharts 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';

                      }

                   }

                };

Ответы [ 3 ]

14 голосов
/ 09 августа 2011

Возможно, вы ищете itemStyle вариант легенды:

legend: {
    itemStyle: {
        color: '#000000',
        fontWeight: 'bold',
        fontSize: '8px'
    }
}
0 голосов
/ 10 августа 2017

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

проверьте этот сайт, вы найдете 5 способов изменить размер с помощью jquery, я попробовал первый, он уже работал

0 голосов
/ 13 марта 2014

Я уверен, что ответ Игоря хороший, но если вы хотите изменить текст в каждом месте графика на одном снимке, просто откройте файл highchart.js и поместите туда нужный стиль шрифта. Просто предоставив модификацию, которую я сделал в моем случае:

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

Здесь я изменил "Lucida" на "Exo 2". :)

...