Question

我有Highcharts的下一个问题。这是其他网站的新Highchart。

见这里：https://imgur.com/a/VQQLU 箭头显示为-3兆瓦，但底部的值显示另一个值。在第一个页面加载时，值是相同的，但是有5秒的新值。它们不会在底部更新。编辑：tolltip将正确更新。我的代码：

$（function（）{

$.getJSON('jsonlive.php',  function(chartData) {
   var ADatum; var Eheit; var AktL; var MinL; var MaxL; var chartValue; var i;
   ADatum = chartData[0].AktDatum;
   Eheit = chartData[0].Einheit;  
   AktL = chartData[0].AktuelleLeistung; 
   MinL = chartData[0].MinLeistung; 
   MaxL = chartData[0].MaxLeistung; 
   var tMin = (MinL*-1); var tMax = MaxL;
   var ttt = new Array();

   if (tMin < tMax) { chartValue = tMax; } else if (tMin > tMax) { chartValue = tMin; } // Ermitteln ob neg/pos Zahl die größere ist.

   ttt[0] = (chartValue*-1); // Skala mit Zahlen beschriften 
   for (i = 1; i < chartValue; i++) { ttt[i] = (i*-1); } 
   var tz = ttt.length ; 
   for (i = 0; i < chartValue; i++) { ttt[(tz+i)] = i; }             
   ttt[ttt.length] = chartValue;

    var gaugeOptions = {
        chart:{ events: {
        load: function () { setInterval(function () {
            $.getJSON('jsonlive.php',  function(chartData) {
                ADatum = chartData[0].AktDatum;
                AktL = chartData[0].AktuelleLeistung; 

                var point = $('#inhalt').highcharts().series[0].setData([AktL], true);  

                 });}, 5000);}
    }, type: 'gauge' },
        title: null,
        pane: {
                center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90,
                background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [[0, '#00fb00'],[1, '#003f00']]},
                    borderWidth: 2,
                    outerRadius: '109%',
                    innerRadius: '102%', shape: 'arc' }]
               },
                series: [{
                data: [AktL],
                dataLabels: { borderWidth: 0,align: 'center',x: 0,y: 110,
                format: '<div style="text-align:center;font-size:24px;color:black">'+AktL+' ' +Eheit+'</span></div>'
            }
        }],
        tooltip: { 
                formatter: function () { return 'Datum: <b>' + (new Date(ADatum).toLocaleString("de-DE", { timeZone: 'UTC' })) +
                '</b> <br>Leistung <b>' + AktL + ' ' + Eheit + '</b>';}, enabled: true },
                yAxis: {lineWidth: 10, minorTickInterval: null, tickPixelInterval: 100, tickWidth: 5, title: { y: -250 }, labels: { y: 2 }}
                };
    // Anzeige
    $('#inhalt').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: (chartValue*-1),max: chartValue,tickPositions: ttt,tickColor: '#666',minorTickColor: '#666',
            plotBands: [{ // optionaler Bereich, zeigt von 0-1 grün, 1 bis hälfte maximum gelb, und hälfte max bis max rot
                from: 0, to: -1, color: '#55BF3B' }, { // green 
                from: -1, to: ((chartValue*-1)/2), color: '#DDDF0D' }, { // yellow
                from: ((chartValue*-1)/2),to: (chartValue*-1),color: '#DF5353' }, { // red
                from: 0,to: 1,color: '#55BF3B' }, { // green
                from: 1,to: (chartValue/2),color: '#DDDF0D' }, { // yellow
                from: (chartValue/2),to: chartValue,color: '#DF5353' }],// red            
            title: { style: { color: 'black', fontWeight: 'bold', fontSize: '24px' }, text: 'Leistung in  '+Eheit },
            labels: { formatter: function () { return this.value; }}},
            credits: { enabled: false } // Link auf highcharts rechts unten an/aus
    }));        
});


     });
</script>

Answer 1

此处的问题是您在AktL中使用了硬编码值（dataLabels.format）。在您的示例中，format只是一个始终使用的字符串。

使用{point.y}在每个setData()上更新标签：

  series: [{
    data: [val],
    dataLabels: {
        // format: val // WONT WORK
        format: '{point.y}'
    }
  }],

现场演示： http://jsfiddle.net/BlackLabel/v28q5n09/

Highcharts：价值不会更新

1 个答案: