2013-08-30 29 views
1

我想輸出到Highstock圖表的JSON數據。最初我努力與JSON格式化的日期,我解決了通過重新格式化日期按照指令在其他答案stackoverflow。但我仍然無法獲得圖形繪製視圖頁面上 -使用JSON日期與Highstock圖表(asp.net MVC)

<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var mydata =[]; 
     chartOjb = new Object(); 
     $.ajax({ 
      type: "GET", 
      url: "/ReportIntance/DummyCall/2", 
      data: '{ }', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (index, item) { 
        chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)); 
        chartOjb.data = item.Series1; 
        mydata.push({ 
         x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)), 
         y: item.Series1 
        }); 
       }) 
      }, 
      failure: function (response) { 
       alert(response); 
      } 

     }); 
     chart1 = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'Chart1' 
      }, 
      title: { 
       text: 'Delivery Price example using Chart' 
      }, 
      xAxis: { 
       type: 'datetime' 
      }, 
      yAxis: { 
       title: { 
        text: 'Price' 
       } 
      }, 
      series: [ { data: mydata }] 
     }); 
    }); 
</script> 
<div id="Chart1" style="height: 500px; min-width: 500px"></div> 

我的JSON字符串是 -

[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, 
{"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, 
{"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, 
{"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, 
{"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, 
{"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}, 
{"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}]  

目前我正在試圖輸出簡單的線條圖和僅使用的DayDate(X軸)和'Series1'作爲Y軸。

高爐圖表顯示'x軸',但沒有顯示線圖或y軸。

有人能指點我做錯了什麼嗎?任何幫助將不勝感激。

編輯:

設置turboThresold場後,我現在可以看到X軸我highstock圖表上。但是y軸的值仍然丟失。 這就是圖表看起來沒有任何y軸線的情況。這些數據似乎是正確的

這裏是我更新的代碼 -

$(function() { 
     var mydata = []; 
     chartOjb = new Object(); 
     // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php 
     $.getJSON('/ReportIntance/DummyCall/2', function (data) { 

      // Add a null value for the end date 
      //data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]); 

      $.each(data, function (index, item) { 
       chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)); 
       chartOjb.data = item.Series1; 
       mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) }); 

       //alert(chartOjb.name + "/" + chartOjb.data); 
      }); 


      // create the chart 
      $('#container').highcharts('StockChart', { 
       chart: { 
        //type: 'candlestick', 
        zoomType: 'x' 
       }, 

       navigator: { 
        adaptToUpdatedData: false, 
        series: { 
         data: mydata 
        } 
       }, 

       scrollbar: { 
        liveRedraw: false 
       }, 

       title: { 
        text: 'Historical prices from June 2012' 
       }, 

       subtitle: { 
        text: 'Displaying 20K records using Highcharts Stock by using JSON' 
       }, 
       plotOptions: { 
        line: { 
         turboThreshold: 20450 
        } 
       }, 
       xAxis: { 
        type: 'datetime', 
        title: 'Time', 
        minRange: 3600 * 1000/15 // one hour 
       }, 
       yAxis:{ 
        title: { 
         text: 'Prices', 
         style: { 
          color: '#89A54E' 
         } 
        }, 
        lineWidth: 1, 
        opposite: false, 
        showEmpty: false //hides empty data series 
       }, 
       series: [{ 
        data: data, 
        pointStart: Date.UTC(2012, 6, 1), // first of June 
        pointInterval: 3600 * 1000/15, 
        dataGrouping: { 
         enabled: false 
        } 
       }] 
      }); 
     }); 
    }); 

enter image description here

+0

因此,你的「mydata」數組是如何看起來像? –

+0

在stackoverflow上我搜索了一些關於turboThreshold的知識。由於我使用大量數據點,因此必須將其設置爲20K +。它現在顯示了HighStock圖表,但在Y軸上沒有行。但是,值在用戶可以拖動時間軸的x軸上顯示爲灰色區域。 –

+0

問題在於你的x值,因爲解析後我發現你收到:Wed Apr 18 2012 01:15:00 GMT + 0200(CEST),但應該是時間戳(以毫秒爲單位); –

回答

0

由於塞巴斯蒂安,我現在看到的圖表。唯一的問題是,我沒有指向正確的'數據'你的建議不轉換爲日期時間提高了性能