Calibro Highcharts

Question

Sto utilizzando i grafici elevati e mi piacerebbe mostrare un grande indicatore (500x500px). Il ridimensionamento dell'indicatore era abbastanza semplice, ma il piccolo blocco con il valore in esso non viene ridimensionato. Come posso rendere quel piccolo blocco più grande?

Grazie per l'aiuto!

jsFiddle: http://jsfiddle.net/AVd8k/

$(function() { 

$('#container').highcharts({ 

    chart: { 
     type: 'gauge', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false, 
     width: 500, 
     height: 500 
    }, 

    title: { 
     text: 'Speedometer' 
    }, 

    pane: { 
     startAngle: -150, 
     endAngle: 150, 
     background: [{ 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
       stops: [ 
        [0, '#FFF'], 
        [1, '#333'] 
       ] 
      }, 
      borderWidth: 0, 
      outerRadius: '109%' 
     }, { 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
       stops: [ 
        [0, '#333'], 
        [1, '#FFF'] 
       ] 
      }, 
      borderWidth: 1, 
      outerRadius: '107%' 
     }, { 
      // default background 
     }, { 
      backgroundColor: '#DDD', 
      borderWidth: 0, 
      outerRadius: '105%', 
      innerRadius: '103%' 
     }] 
    }, 

    // the value axis 
    yAxis: { 
     min: 0, 
     max: 200, 

     minorTickInterval: 'auto', 
     minorTickWidth: 1, 
     minorTickLength: 10, 
     minorTickPosition: 'inside', 
     minorTickColor: '#666', 

     tickPixelInterval: 30, 
     tickWidth: 2, 
     tickPosition: 'inside', 
     tickLength: 10, 
     tickColor: '#666', 
     labels: { 
      step: 2, 
      rotation: 'auto' 
     }, 
     title: { 
      text: 'km/h' 
     }, 
     plotBands: [{ 
      from: 0, 
      to: 120, 
      color: '#55BF3B' // green 
     }, { 
      from: 120, 
      to: 160, 
      color: '#DDDF0D' // yellow 
     }, { 
      from: 160, 
      to: 200, 
      color: '#DF5353' // red 
     }]   
    }, 

    series: [{ 
     name: 'Speed', 
     data: [80], 
     tooltip: { 
      valueSuffix: ' km/h' 
     } 
    }] 

}, 
// Add some life 
function (chart) { 
    if (!chart.renderer.forExport) { 
     setInterval(function() { 
      var point = chart.series[0].points[0], 
       newVal, 
       inc = Math.round((Math.random() - 0.5) * 20); 

      newVal = point.y + inc; 
      if (newVal < 0 || newVal > 200) { 
       newVal = point.y - inc; 
      } 

      point.update(newVal); 

     }, 3000); 
    } 
}); 
}); 

Answer 1

provare questo sostituendo series (intero oggetto) con:

series: [{ 
      name: 'Speed', 
      data: [80], 
      tooltip: { 
       valueSuffix: ' km/h' 
      }, 
      dataLabels: { 
        enabled: true, 
        style: { 
         //fontWeight:'bold', 
         fontSize: '22px' 
        } 
       } 
     }] 

Dimostrazione: http://jsfiddle.net/nmQfE/

Naturalmente, è possibile regolare la dimensione del carattere che si desidera

Answer 2

Sembra che la proprietà si è dopo è: plotOptions.gauge.dataLabels.style.fontSize

http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style

Prova ad aggiungere qualcosa di simile alle opzioni:

plotOptions: { 
    gauge: { 
     dataLabels: { 
      style: { 
       fontSize: '60px' 
      } 
     } 
    } 
} 

Potrebbe essere necessario riposizionarlo utilizzando le proprietà x e y.