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

Question

我没有运气，几天都在挠头。我想创建一个显示数据库数据的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的温度值。

Answer 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