Znaczniki czcionek o wysokiej rozdzielczości

Używam Highcharts dla mojej strony internetowej i nie mogę się domyślić, jak poprawnie zmienić rozmiar czcionki tytułu i klucza na dole. Używam kolumnę podstawową z zielonym tle: http://www.highcharts.com/demo/column-basic/dark-green Znaczniki czcionek o wysokiej rozdzielczości

Obecnie jest to mój kod:

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] 

     }] 
    }); 
});

Html wezwanie:

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

i jak stwierdzono Używam Highcharts zielony motyw dostarczone przez stronę internetową po kliknięciu przycisku Wyświetl motyw wizualny.

Teraz moim problemem jest to, kiedy zmienić:

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

w zależności od tego, jak duży mój rozmiar czcionki wartości 4 (2009, 2010, 2011, 2012) są albo nie visable lub ruch po wyjęciu z pudełka pod wykresem. Samo pudełko nie zmienia rozmiaru (co robi w jfiddle, które nie zawiera motywu). To samo dzieje się z:

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

zmiany koloru w oparciu o moją wartość, ale rozmiar czcionki nie. Każda pomoc będzie doceniona.

Źródło

2013-07-18 Ryan Sayles

Ok, nie mam pojęcia co jest nie tak z kodem, ale to działa na mnie perfekcyjnie: http://jsfiddle.net/kHzr9/2/ Może masz starą wersję Highcharts? Ogólnie rzecz biorąc, ustawienie 'color: 'white'' na przykład nie jest najlepszym pomysłem, myślę, że ... –

Ta kompozycja używa czcionki zamiast fontSize. Tak, to legenda jest zdefiniowany jako:

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

     },

Jeśli definiować z obu czcionki i fontSize, że to zadziała (wydaje się to bug do mnie, ale być może jest to cecha):

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

     },

Zakładam, że tytuł ma to samo.

http://jsfiddle.net/kHzr9/

Źródło

2013-07-18 17:50:20

Znaczniki czcionek o wysokiej rozdzielczości

Odpowiedz

Powiązane problemy