如何从我的数据库数据中生成实时图表？

Posted 2023-02-19

【中文标题】如何从我的数据库数据中生成实时图表？

【英文标题】：How can I generate a real-time highchart from my database data?

【发布时间】：2015-07-06 11:33:32

【问题描述】：

我查看了以下链接 Binding json result in highcharts for asp.net mvc 4、highcharts with mvc C# and sql、HighChart Demo 和许多其他链接。但是，我找不到演示如何使用数据库中的数据实现高图的工作演示。

目标： 我想生成一个实时的 highchart 线图，从我的数据库中获取数据。我想要的与第三个链接非常相​​似，它提供了一个带有随机生成值的实时高图。 X 轴和 Y 轴也相似，因为我希望 x 轴为“时间”（我的数据库中有一个 DateTime 列），y 轴为整数（我有一个变量）以及在我的数据库中）。

在将模型数据发送到我的剃刀视图时，我需要帮助。

请注意，我已经在使用 SignalR 来显示实时表。我也想知道它是否也可以用来自动更新highchart。

下面是视图中我的脚本的代码 sn-p。我已使用链接 3 中提供的代码来生成高图。请告诉我应该在哪里应用我的代码的更改。

@section Scripts
        <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="~/SignalR/Hubs"></script>

        <script type="text/javascript">
            $(document).ready(function () 
                // Declare a proxy to reference the hub.
                var notifications = $.connection.dataHub;

                //debugger;
                // Create a function that the hub can call to broadcast messages.
                notifications.client.updateMessages = function () 
                    getAllMessages()
                ;
                // Start the connection.
                $.connection.hub.start().done(function () 
                    alert("connection started")
                    getAllMessages();
                ).fail(function (e) 
                    alert(e);
                );
                //Highchart
                Highcharts.setOptions(
                    global: 
                        useUTC: false
                    
                );
                //Fill chart
                $('#container').highcharts(
                    chart: 
                        type: 'spline',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,
                        events: 
                            load: function () 
                                // set up the updating of the chart each second
                                var series = this.series[0];
                                setInterval(function () 
                                    var x = (new Date()).getTime(), // current time
                                        y = Math.random();
                                    series.addPoint([x, y], true, true);
                                , 1000);//300000
                            
                        
                    ,
                    title: 
                        text: 'Live random data'
                    ,
                    xAxis: 
                        type: 'datetime',
                        tickPixelInterval: 150
                    ,
                    yAxis: 
                        title: 
                            text: 'Value'
                        ,
                        plotLines: [
                            value: 0,
                            width: 1,
                            color: '#808080'
                        ]
                    ,
                    tooltip: 
                        formatter: function () 
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                        
                    ,
                    legend: 
                        enabled: false
                    ,
                    exporting: 
                        enabled: false
                    ,
                    series: [
                        name: 'Random data',
                        data: (function () 
                            // generate an array of random data
                            var data = [],
                                time = (new Date()).getTime(),
                                i;

                            for (i = -19; i <= 0; i += 1) 
                                data.push(
                                    x: time + i * 1000,
                                    y: Math.random()
                                );
                            
                            return data;
                        ())
                    ]
                );

            );
            function getAllMessages() 
                var tbl = $('#messagesTable');
                var data = @html.Raw(JsonConvert.SerializeObject(this.Model))

        $.ajax(
            url: '/home/GetMessages',
            data: 
                id: data.id,
            ,
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'html'

        ).success(function (result) 
            tbl.empty().append(result);
            $("#g_table").dataTable();
        ).error(function (e) 
            alert(e);
        );
            
        </script>
    

更新代码

//Highchart
Highcharts.setOptions(
global: 
   useUTC: false 
 );
//Fill chart
chart = new Highcharts.Chart(
chart: 
  renderTo: 'container',
  defaultSeriesType: 'spline',
  events: 
      load:  $.connection.hub.start().done(function () 
      alert("Chart connection started")
      var point = getAllMessagesforChart();
      var series = this.series[0];
      setInterval(function (point) 

         // add the point
         series.addPoint([point.date_time, point.my_value], true, true)

         , 1000);
           ).fail(function (e) 
                   alert(e);
                               )
                           
                        
        title: 
        text: 'Live random data'
                   ,
        xAxis: 
        type: 'datetime',
        tickPixelInterval: 150,
        maxZoom: 20 * 1000
                        ,
        yAxis: 
        minPadding: 0.2,
        maxPadding: 0.2,
        title: 
            text: 'Value',
            margin: 80
                           
                       ,
        series: [
              name: 'Random data',
              data: []
                       ]
                    );


function getAllMessagesforChart() 
                var data = @Html.Raw(JsonConvert.SerializeObject(this.Model))

        $.ajax(
            url: '/home/GetMessagesforChat',
            data: 
                id: data.id,
            ,
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'html'

        ).success(function (data) 
            data = JSON.parse(data);
            //data_graph = [].concat(data);
            //$("#debug").html(data_graph);

        ).error(function (e) 
            alert(e);
        );

                return data;
                //return data_graph;

【问题讨论】：

很抱歉，您从哪里获得数据库资料？数据库是什么样的？

首先，我有一个实体框架，我将 ms sql 数据库连接到我的 Web 应用程序。对于实时表 SignalR，我创建了一个模型类，就像此链接 venkatbaggu.com/… 提供的方法一样。所以基本上我不确定我是否应该使用 EF 或其他用于 signalR 来生成高图。至于我的数据库，它是一个简单的表，由 3 列组成，分别是 id、日期时间和整数值。

最简单的场景。 1）准备与数据库通信的脚本并返回带有点的json。 2）。在高图中捕获加载事件，例如示例。不使用 math.random，从第 1 点开始使用自定义脚本调用 ajax 到 url。3) 将点添加到图表。

非常感谢您澄清这些步骤。但是我对第二步有两个问题，你的意思是我从“load:”部分调用 ajax，但是“series:”部分会发生什么，我相信这使它成为现实，所以我应该在那里放什么。而且由于我是 json 的新手，如果您为我提供一些第一步的代码或链接，我将不胜感激。谢谢@SebastianBochan

我的意思是这样的，jsfiddle.net/zcogcjyx，但显然您需要将 data.x / data.y 调整为您的 json 中的字段。

【参考方案1】：

有一个例子可以帮助你：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/

它使用 ajax 回调函数。

好吧，你也可以看看我的示例，我通过单击添加按钮动态添加系列。

http://plnkr.co/edit/Sh71yN?p=preview

您只需要以正确的结构添加数据。

看看函数

$("#btnAdd").click(function()

我的代码 script.js

我希望它有所帮助。 问候， 路易斯