将json数据加载到具有多个系列的highstocks并将TimeStamp添加到xAxis

时间:2015-05-09 16:50:40

标签: javascript highcharts highstock

如何将json数据加载到多个系列并在HighStock中将时间添加到xAxis? 任何想法如何在HighStock图表的右侧和左侧添加多个yAxis? 我试图转换为json结构[“name”:data:[]],但我找不到如何做到这一点。请帮忙。

我的代码在ASP.Net MVC 4中:

public JsonResult GetData()
  {

     var chart = new List<object>();
     chart.Add( new { Speed = 50, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:53:07" } );
     chart.Add( new { Speed = 80, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:52:06" } );
     chart.Add( new { Speed = 90, Tank = 201.56, odomoter = 2191.907, Time = "05/04/2015 23:51:06" } );
     var jss = new JavaScriptSerializer();
     var output = jss.Serialize( chart );
     return Json( output, JsonRequestBehavior.AllowGet );
  }

$(function () {

            $.getJSON('GetData', function(jdata) {
                alert(jdata);
            
                       // Create the chart
                       $('#container').highcharts('StockChart', {

                           chart: {
                               type: 'spline',
                               zoomType: 'xy'
                           },
                           rangeSelector: {
                               buttons: [{
                                   type: 'hour',
                                   count: 1,
                                   text: '1h'
                               }, {
                                   type: 'day',
                                   count: 2,
                                   text: '2d'
                               }, {
                                   type: 'week',
                                   count: 1,
                                   text: '1w'
                               }, {
                                   type: 'month',
                                   count: 1,
                                   text: '1m'
                               }, {
                                   type: 'year',
                                   count: 1,
                                   text: '1y'
                               }, {
                                   type: 'all',
                                   text: 'All'
                               }],
                               inputEnabled: true, // it supports only days
                               selected: 0 // day
                           },
                           //xAxis: {

                           //    minRange: 3600 * 1000, // one hour
                           //    type: 'datetime',
                           //    dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
                           //    // minRange: 15*60*1000,
                           //    //maxZoom: 48 * 3600 * 1000,
                           //    labels: {
                           //        rotation: 330,
                           //        y: 20,
                           //        staggerLines: 1
                           //    }
                           //},
                           yAxis: [{ // Primary yAxis
                               labels: {
                                   format: '{value}°C',
                                   style: {
                                       color: '#89A54E'
                                   }
                               },
                               title: {
                                   text: 'Temperature',
                                   style: {
                                       color: '#89A54E'
                                   }
                               }
                           }, { // Secondary yAxis
                               title: {
                                   text: 'Consumo',
                                   style: {
                                       color: '#4572A7'
                                   }
                               },
                               labels: {
                                   format: '{value} Kw',
                                   style: {
                                       color: '#4572A7'
                                   }
                               },
                               opposite: true
                           }],
                           title: {
                               text: 'AAPL Stock Price'
                           },
                           series: data

                           //series: [{
                           //    name: 'AAPL',
                           //    data: data,
                           //    tooltip: {
                           //        valueDecimals: 2
                           //    }
                           //}]
                       });
                   });

               });

0 个答案:

没有答案