如何创建动态更新样条 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