Question

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

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

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

请注意，我已使用SignalR显示实时表。我也想知道它是否也可用于自动更新高图。

以下是视图中我脚本的代码段。我使用链接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;

}

Answer 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

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

如何从数据库数据生成实时高图？

1 个答案: