0

×212414×123754

私はcodebehind.aspx.csファイルでPageMethodを呼び出しています。これは、aspxページのjavascriptコードで文字列array []を返します。当面の問題は、文字列配列がTime（X axis-Value）、Data / Name（Y axis Value）、Type（チャートのタイプ（スプラインまたは列）を定義します）をWEBサービスから取得します。そのデータを使用して、チャートに系列を動的に追加しています。関数chart.AddSeries（）を使用していますが、実行できません。

誰かがそれを行う方法を教えてもらえますか？それを行うと、特定のシリーズにポイントを追加したいと思います。

同じチャートのtypes{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>
4

1 に答える 1

0

これは私がやったことであり、魅力のように機能します。余談ですが、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 で完全にチャートを作成できます。

于 2012-05-21T23:33:09.457 に答える