Monday, 15 June 2015

javascript - Highcharts Gauge -


I am using high charts and I want to show a bigger gauge (500x500px). Changing the shape of the gauge was easy, but there is no change in the size of the smaller segment with the value.

jsFiddle:

  $ (function () {$ ('#' container '). High Chart ({chart: {type:' gauge ', plot background color: Empty, plot background image: empty, plot borderwidth: 0, plotshadow: false, width: 500, height: 500}, title: {text: 'speedometer'}, pane: {startAngle: -150, end Angel: 150, background : [[Background color: {linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, prevents: [[0, '#FFF'], [1, '# 333']]} , Boundary width: 0, outer radius: '109%'}, {background color: {linear gradients: {x1: 0, y1: 0, x2: 0, y2: 1}, the stopping Is: [[0, '# 333'], [1, '#FFF']], boundary width: 1, outer radius: '107%'}, {// default background}, {background color: '# DDD ', Border width: 0, outer: radius:' 105% ', internal radix:' 103% '}]}, // value axis yAxis: {min: 0, max: 200, minor teak interval:' auto ', minor Tykewith: 1, Minor Tichelthth: 10, Minor Stamps: 'Inside', Minor Ticket: '# 666', Tick Pixel Interval: 30, Stickwickath: 2, Ticcionito N: 'Inside', Tic: Length: 10, Tic: Color : '# 666', label: {step: 2, rotation: ' Tow '}, Title: {text:' km / h}}, plotbands: [[from: 0, to: 120, color: '# 55BF3B' // green}, {to: 120, to: 160, color: '# Dddf 0d' // yellow}, {160: to 200: color: color: '# df5353' // red}]}, series: [{name: 'speed', data: [80], tooltip : {ValueSuffix: 'km / h'}}]}, // Add some life work (charts) {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 (Newell & lt; 0 || newVal & gt; 200) {newVal = point.y - inc;} Point.update (newVal);}, 3000); }}); });   

high gauge

Try changing the chain (entire object) with

  series: [Name: 'speed', data: [80], tooltip: {valueSuffix: 'km / h}}, data labels: {enable: true, style: {// fontWight:' bold ', fontSize:' 22px '} }}   

Proof:

Of course, you want you can adjust the font size

No comments:

Post a Comment