Question

我有用c＃编写的控制器，它将以json格式写入数据.....

<%@ 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
]

Answer 1

您需要将JSON数据解析为数组，而不是将其传递给高图的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>

Answer 2

您能否在您的主管部分和$(document).ready();功能

之前调用您的两个脚本

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

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

数据未在高图中显示/绘制

2 个答案: