web-dev-qa-db-fra.com

Tailles de police des légendes des Highcharts

J'utilise Highcharts pour ma page Web et je n'arrive pas à comprendre comment modifier correctement la taille de la police du titre et de la clé en bas. J'utilise la colonne de base avec un fond vert: http://www.highcharts.com/demo/column-basic/dark-green

Actuellement, c'est mon code:

Function: 
$(function () {
    $('#content').highcharts({
        chart: {
            type: 'column'
        },
        legend: {
            itemStyle: {
                color: 'white',
                fontWeight: 'bold',
                fontSize: '20px'
            }
        },
        title: {
            text: 'Title',
            style:{
                    color: 'white',
                    fontSize: '25px'
                }       
        },
        subtitle: {
            text: 'Subtitle'
        },
         xAxis: {
            categories: [
                ' '
            ]
        },
        yAxis: {
            min: 0,
            title: {                    
                text: 'MMBTUs x 10,0000',
                style:{
                    color: 'white',
                    fontSize: '25px'
                }
            },
            labels: {
                style: {
                    color: 'white',
                    fontSize:'25px'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '2009',
            data: [4900000]

        }, {
            name: '2010',
            data: [4900000]

        }, {
            name: '2011',
            data: [5500000]

        }, {
            name: '2012',
            data: [5200000]

        }]
    });
});

Appel HTML:

<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>

et comme indiqué, j'utilise le thème vert Highcharts fourni par le site Web lorsque vous cliquez sur afficher le thème visuel.

Maintenant, mon problème est quand je change:

legend: {
        itemStyle: {
            color: 'white',
            fontWeight: 'bold',
            fontSize: '20px'
        }

selon la taille de ma police, les 4 valeurs (2009, 2010, 2011, 2012) ne sont pas visibles ou le déplacement hors de la zone sous le graphique. La boîte elle-même ne redimensionne pas (ce qu'elle fait dans jfiddle qui n'inclut pas le thème). La même chose se produit avec:

title: {
        text: 'Title',
        style:{
                color: 'white',
                fontSize: '25px'
            }       
    },

la couleur change en fonction de ma valeur mais pas la taille de la police. Toute aide serait appréciée.

javascripthtmlhighcharts
15
Ryan Sayles

Ce thème utilise une police au lieu de fontSize. Donc, sa légende est définie comme:

 legend: {
              itemStyle: {
                 font: '9pt Trebuchet MS, Verdana, sans-serif',
                 color: '#A0A0A0'
              },
              itemHoverStyle: {
                 color: '#FFF'
              },
              itemHiddenStyle: {
                 color: '#444'
              }

        },

Si vous définissez les vôtres avec font et fontSize, cela fonctionnera (cela me semble être un bug, mais c'est peut-être une fonctionnalité):

 legend: {
              itemStyle: {
                 fontSize:'20px',
                 font: '20pt Trebuchet MS, Verdana, sans-serif',
                 color: '#A0A0A0'
              },
              itemHoverStyle: {
                 color: '#FFF'
              },
              itemHiddenStyle: {
                 color: '#444'
              }

        },

Je suppose que le titre a la même chose.

http://jsfiddle.net/kHzr9/

26
Barbara Laird