将动态数据系列添加到 Highcharts

Question

×212414 ×123754

我在 codebehind.aspx.cs 文件中调用一个 PageMethod，它在 aspx 页面的 javascript 代码中返回一个字符串数组 [] 手头的问题是字符串数组返回 Time(X axis-Value),Data/名称（Y 轴值），类型（定义图表的类型（样条线或柱形））来自 WEB SERVICE。我正在使用该数据将系列动态添加到图表中。使用功能 chart.AddSeries() 但我无法这样做。

任何人都可以指导我如何做到这一点，并且在这样做时我想为特定系列添加积分。

请注意，我将在同一个图表上显示类型{Spline 和 Column}。

<script type="text/javascript">


     alert("Bingo");


     $(function () {
         $(document).ready(function () {

             Highcharts.setOptions({

                 global: {

                     useUTC: false

                 }

             });



             var chart;

             chart = new Highcharts.Chart({

                 chart: {

                     renderTo: 'ltrChart',

                     type: 'spline',

                     marginRight: 10,

                     events: {

                         load: function () {


                             PageMethods.GetSingleValue(function (result) {

                                 var Name = new Array();
                                 var Type = new Array();
                                 var Data = new Array();
                                 var Time = new Array();

                                 var Ser = chart.series;

                                 for (var i = 0; i < 6; i++) {
                                     Type[i] = result[i].split('-')[0];
                                     Name[i] = result[i].split('-')[1];
                                     Data[i] = result[i].split('-')[2];
                                     Time[i] = result[i].split('-')[3];

   chart.addSeries({ name :Name[i], data : [ [Time[i], Data[i]] ] }, true, true);




                                     /* Test Method To ensure data Fetching */
                                     // alert(Type[i] + Name[i] + Data[i] + Time[i]);
                                     // alert(result[i]);


                                 }

                             })



                             //console.log(typeof PageMethods.GetSingleValue);
                             // PageMethods.GetSingleValue();
                             setInterval("PageMethods.GetSingleValue()", 5000);







                         }

                     }

                 },

                 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: 'Test Data',

                 data: [[10, 50], [15, 55]]

             }]

         });

     });

 });  
   </script>

Answer 1

这就是我所做的，就像一个魅力。顺便说一句，既然您提到了 aspx 页面，为什么不直接购买 dot net highcharts 库呢？如果您是点网迷，生活会轻松很多！

我最初创建一个包含 5 个元素的图表，然后使用“迭代”的 JSON 序列化字符串将数据传递到客户端。遍历元素给了我一个动态的实时图表！

Highcharts chart = new Highcharts("livechart")
        .InitChart(new Chart
        {
            Events = new ChartEvents { Load = "ChartEventsLoad" }
        })
        .SetSeries(initialSeries)
        .SetXAxis(new XAxis { Categories = lsst.ToArray() })
        .AddJavascripVariable("iterated", iterateData.ToString())
        .AddJavascripVariable("index", "5")
        .AddJavascripFunction("ChartEventsLoad",
        @"// set up the updating of the chart each 5 seconds
        var result = iterated;
        var theseries = eval(result); // De-serializing the JSON object
        var loopseries = function() {
        var sseries = livechart.series[0]
           ,shift = sseries.data.length > 5; // shift if the series is longer than 5;
        sseries.addPoint(theseries[0].data[index], true, shift);
        var sseries1 = livechart.series[1]
        sseries1.addPoint(theseries[1].data[index], true, shift);
        index++; };
        setInterval(loopseries, 5000);")

您可以添加任意数量的系列；如果需要，您可以使用循环，并且可以使用我作为函数添加的相同代码完全在 Javascript 中创建图表。