2015-04-17 63 views
0

我已經寫在其中將JSON格式寫入數據c#控制器.....數據/繪製在highchart

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="graphs.aspx.cs" Inherits="AutomationWebPortal.graphs" %> 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'spline' 
       }, 
       legend: { 
        align: 'right', 
        verticalAlign: 'top', 
        layout: 'vertical', 
        x: 0, 
        y: 100 
       }, 
       series: [] 
      }; 
      $.ajax({ 
       url: './graphs.aspx/GetDataForTotalPassedFailTime', 
       type: 'POST', 
       async: false, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        alert(data); 
        options.series[0].data = data; 
        alert(options.series[0].data); 
        var chart = new Highcharts.Chart(options); 
       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        alert(textStatus); 
       } 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <script src="js/libs/highcharts.js"></script> 
    <script src="js/libs/exporting.js"></script> 
    <div id="container" style="height: 400px"></div> 
</body> 
</html> 

JSON格式響應:=

[ 
    624.3519791, 
    162.30429669999998, 
    170.67211089999998, 
    352.8677317, 
    0.0, 
    0.0, 
    97.306944899999991, 
    0.0, 
    305.1448274, 
    2514.6032158999997, 
    2225.8082492999997, 
    2415.6067002, 
    568.1111355999999, 
    2510.9615231000002 
] 

回答

2

您需要將您的JSON數據解析成一個數組比它傳遞給highchart的series: []參數,以形成你的圖表。

有它一看,它可以幫助你:

<script type="text/javascript"> 
    $(document).ready(function() { 
      $.ajax({ 
       url: './graphs.aspx/GetDataForTotalPassedFailTime', 
       type: 'POST', 
       async: false, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (dataR) { 
        alert(dataR); 

        var options = { 
         chart: { 
          renderTo: 'container', 
          type: 'spline' 
         }, 
         legend: { 
          align: 'right', 
          verticalAlign: 'top', 
          layout: 'vertical', 
          x: 0, 
          y: 100 
         }, 
         series: [{data:dataR}] 
        }; 
        var chart = new Highcharts.Chart(options); 

       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        alert(textStatus); 
       } 
      }); 

     }); 
    </script> 
+0

嗨chandan,我已經返回json數組,如果我硬編碼JSON,Highchart的作品,但你的建議更改後也不工作.....真的不能得到的原因。 –

+0

嗨Sushil,我相信這是問題w.r.t.以JSON數據格式。你爲調試做什麼是手工創建預期的JSON數組對象並將其傳遞給「series」參數。比你可以找出你的數據格式出錯的地方 –

+0

我使用你的代碼創建了JSFiddle,請看看它的一次:https://jsfiddle.net/chandansharma/mL4y8pam/1/ –

0

你能請在您的頭部以及您的$(document).ready();功能之前打兩個腳本

<script src="js/libs/highcharts.js"></script>

<script src="js/libs/exporting.js"></script>

+0

我試過不工作。 –