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

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

1 个答案: