2016-08-16 2 views
1

Я хочу, чтобы общее значение для моего твердого калибровочного графика представлялось как число с запятой. Но я получаю номер без каких-либо запятых. Я пробовалФормат данных для диаграммы сплошных шкал высоких диаграмм

Highcharts.setOptions({ 
    lang: { 
     thousandsSep: ',' 
    } 
}); 

Но это не сработало с сплошным калибровочным графом. enter image description here

Я хочу, чтобы большое число было сформировано. Пожалуйста, помогите.

ответ

4

вам нужно использовать format вариант под dataLabels

для более подробной информации читать Documentation

$(function() { 
 
    Highcharts.setOptions({ 
 
     lang: { 
 
      thousandsSep: ',' 
 
     } 
 
    }); 
 
    var gaugeOptions = { 
 
     chart: { 
 
      type: 'solidgauge' 
 
     }, 
 
     title: null, 
 
     pane: { 
 
      center: ['50%', '85%'], 
 
      size: '140%', 
 
      startAngle: -90, 
 
      endAngle: 90, 
 
      background: { 
 
       backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', 
 
       innerRadius: '60%', 
 
       outerRadius: '100%', 
 
       shape: 'arc' 
 
      } 
 
     }, 
 
     tooltip: { 
 
      enabled: false 
 
     }, 
 
     // the value axis 
 
     yAxis: { 
 
      stops: [ 
 
       [0.1, '#55BF3B'], // green 
 
       [0.5, '#DDDF0D'], // yellow 
 
       [0.9, '#DF5353'] // red 
 
      ], 
 
      lineWidth: 0, 
 
      minorTickInterval: null, 
 
      tickAmount: 2, 
 
      title: { 
 
       y: -70 
 
      }, 
 
      labels: { 
 
       y: 16 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      solidgauge: { 
 
       dataLabels: { 
 
        y: 5, 
 
        borderWidth: 0, 
 
        useHTML: true 
 
       } 
 
      } 
 
     } 
 
    }; 
 

 
    // The speed gauge 
 
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { 
 
     yAxis: { 
 
      min: 0, 
 
      max: 200000, 
 
      title: { 
 
       text: 'Speed' 
 
      } 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     series: [{ 
 
      name: 'Speed', 
 
      data: [180000], 
 
      dataLabels: { 
 
       format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
 
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{point.y:,.0f}</span><br/>' + 
 
        '<span style="font-size:12px;color:silver">km/h</span></div>' 
 
      }, 
 
      tooltip: { 
 
       valueSuffix: ' km/h' 
 
      } 
 
     }] 
 

 
    })); 
 

 
    // The RPM gauge 
 
    $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, { 
 
     yAxis: { 
 
      min: 0, 
 
      max: 5, 
 
      title: { 
 
       text: 'RPM' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'RPM', 
 
      data: [1], 
 
      dataLabels: { 
 
       format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
 
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' + 
 
        '<span style="font-size:12px;color:silver">* 1000/min</span></div>' 
 
      }, 
 
      tooltip: { 
 
       valueSuffix: ' revolutions/min' 
 
      } 
 
     }] 
 
    })); 
 

 
    // Bring life to the dials 
 
    setTimeout(function() { 
 
     // Speed 
 
     var chart = $('#container-speed').highcharts(), 
 
      point, 
 
      newVal, 
 
      inc; 
 

 
     if (chart) { 
 
      point = chart.series[0].points[0]; 
 
      inc = Math.round((Math.random() - 0.5) * 100); 
 
      newVal = point.y + inc; 
 
      if (newVal < 0 || newVal > 200) { 
 
       newVal = point.y - inc; 
 
      } 
 
      point.update(newVal); 
 
     } 
 

 
     // RPM 
 
     chart = $('#container-rpm').highcharts(); 
 
     if (chart) { 
 
      point = chart.series[0].points[0]; 
 
      inc = Math.random() - 0.5; 
 
      newVal = point.y + inc; 
 
      if (newVal < 0 || newVal > 5) { 
 
       newVal = point.y - inc; 
 
      } 
 
      point.update(newVal); 
 
     } 
 
    }, 2000); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 

 
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
 

 
<div style="width: 600px; margin: 0 auto"> 
 
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div> 
 
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div> 
 
</div>

Смежные вопросы