2015-04-17 36 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

我试过不工作。 –