如何创建动态更新样条 Highcharts 图表？

Posted 2023-03-14

【中文标题】如何创建动态更新样条 Highcharts 图表？

【英文标题】：How to create dynamic update spline Highcharts chart?

【发布时间】：2019-03-08 19:31:06

【问题描述】：

我在没有运气的情况下摸索了几天。 我想创建显示数据库中数据的 Highcharts 图表。 我做了一些图表没有问题，但我卡在显示一些点（20 或更多）的图表上，并将样条图滚动到左侧显示新数据。

我创建了两个数组 jfDatumi（包含来自数据库的 hh:mm 格式的时间）(12:10) 和包含温度值 (-2.3...) 的 jfTempOuts。

现在我想在图表上显示这些数据，这些数据每秒移动一次，增加新的点（时间、温度），但当时只显示 20 个点。 当涉及到数组的末尾时，我希望图表从第一点重新开始。 就像这张图表https://www.highcharts.com/demo/dynamic-update 但我希望 X 轴从我的数组 (jfDatumi) 中显示我的时间而不是当前时间（没有 var x = (new Date()).getTime())

谁能帮帮我？因为这个，我正在拔头发。 以下是我当前的代码。

$(function () 

$(document).ready(function () 


    Highcharts.setOptions(
    


        global: 
        
            useUTC: false,

        
    );

    $('#test').highcharts(
    
        credits: 
        
            text: 'By: http://amicus.ba',
            href: 'http://amicus.ba'
        ,
    chart:
    
        type: 'spline',
        animation: Highcharts.svg, // Ne animiraj u starom IE
        marginRight: 1,

        events: 
        
            load: function () 
            

                // Postaviti update grafikona svake sekunde
                var series = this.series[0];


                setInterval(function () 
                


                    var x = jfDatumi, // Trenutno vrijeme

                    //var x = new Date(), // current time
                    //x=jfDatumi,
                    //var x = (new Date()).getTime(),
                    y = jfTempOuts;
                    series.addPoint([x, y], true, true);

                , 1500);

            

        

    ,
    title: 
    
        text: 'Test Vanjska temperatura [°C]'
    ,
    xAxis: 
    
        type: 'datetime',
        categories: jfDatumi,
        minRange: 1,
        title: 
        
            text: 'Vrijeme'
        ,
            tickPixelInterval: 1,   

    ,
    yAxis: 
    
        minRange: 0,
        title: 
        
            text: '[°C]'
        ,
        plotLines: [
        
            value: 0,
            width: 2,
            color: '#808080'
        ]
    ,
    tooltip: 
    
        formatter: function () 
        
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.numberFormat(this.y, 2) + ' [°C]';

        
    ,

    legend: 
    
        enabled: false
    ,
    exporting: 
    
        enabled: false
    ,

    series: [
    
        name: 'Vanjska temperatura',
        //data: (jfTempOuts)


        data: (function () 
          // generate an array of random data

          var data = [],
            time = jfDatumi,
            i;

          for (i = 0; i <= 20; i += 1) 
            data.push([
              time,
              jfTempOuts
            ]);
          
          return data;
        ())


    ]
);
);
);

此时，我有来自 jfDatumi 的时间，但没有来自 jfTempOuts 的温度值。

【参考方案1】：

我自己找到了解决方案。 这是对我有用的代码：

// Animirani grafikon vanjske temperature
$(function () 

$(document).ready(function () 


    Highcharts.setOptions(
    
        global: 
        
            useUTC: false,  
        
    );

    $('#vanjskaTemp').highcharts(
    
        credits: 
        
            text: 'By: http://amicus.ba',
            href: 'http://amicus.ba'
        ,
    chart:
    
        type: 'spline',
        animation: Highcharts.svg, // Ne animiraj u starom IE
        marginRight: 1,

        events: 
        
            load: function () 
            
                // Postaviti update grafikona po podešenom intervalu
                var series = this.series[0];

                var br=20; // Start brojača za indeksiranje niza temperatura (podešeno u: for (i = 0; i <= 20; i += 1))

                setInterval(function () 
                
                    br=br+1;  // Brojač za indeksiranje niza temperatura

                    // Zaustavljanje skrolovanja ako je dostignut kraj niza jfTempOuts
                    if (br<=jfTempOuts.length-1) 
                    
                        var x = jfSamoVrijeme; // Vrijeme za X osu (zaustavi se osa ako se ne očitava)
                        y = jfTempOuts[br]; // Vrijednosti za Y osu (Vanjske   temperature)

                        series.addPoint([x, y], true, true);
                    
                    else
                       
                        //document.write("BR:<li>"+br+"</li>");
                    

                , 1500);
            
        
    ,
    title: 
    
        text: 'Vanjska temperatura [°C]'
    ,
    xAxis: 
    
        type: 'datetime',
        categories: jfSamoVrijeme,
        minRange: 1,
        title: 
        
            text: 'Vrijeme'
        ,
            tickPixelInterval: 1,       
    ,
    yAxis: 
    
        minRange: 0,
        title: 
        
            text: 'Vanjska temperatura [°C]'
        ,
        plotLines: [
        
            value: 0,
            width: 0.5,
            color: '#808080'
        ]
    ,
    tooltip: 
    
        formatter: function () 
        
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.numberFormat(this.y, 2) + ' [°C]';
        
    ,

    legend: 
    
        enabled: false
    ,
    exporting: 
    
        enabled: false
    ,

    series: [
    
        name: 'Vanjska temperatura',

        data: (function () 

          var data = [],
            time = jfSamoVrijeme,
            i;

          for (i = 0; i <= 20; i += 1) 
            data.push([
              time,
              jfTempOuts
            ]);
          
          return data;
        ())  
    ]
 );
 );
 );
 // Kraj animiranog grafikona vanjske temperature

我现在唯一的问题是我不能显示前 20 个点，但不是那么重要。 我也会找到解决这个问题的方法。 My chart