Question

我正在使用HighCharts开发一个饼图。使用asp.net MVC。

我尝试使用像这样的ViewData为java提供数据字符串：

 data: (@ViewData["data"])

当我在JSON查看器中查看此数据时，它看起来像这样：

[{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]

当我把它硬编码在'data：'属性后面时，馅饼就会整齐地显示出来。

然而，当我尝试从动作方法中提供它时，它会失败。在这种情况下，它看起来像这样：

"[{\"name\":\"Bouwend\",\"y\":0},{\"name\":\"Failed\",\"y\":12},{\"name\":\"Succes\",\"y\":19}]"

如何在没有所有转义字符串的情况下生成JSON数据，以便Highcharts接受它？

@model SATS.Tools.Tfs.Extensions.ServiceApi.Controllers.CruiseControlChart

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

    <script src="../../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../../scripts/highcharts.js"></script>
 
    <meta name="viewport" content="width=device-width" />
    <title>CruiseControlChart</title>
    <script type="text/javascript">
        $(document).ready(function () {

            // Build the chart / configure the highcharts
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '@ViewData["charttitle"]' 
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    colorByPoint: true,
                    data: (@ViewData["data"])
                 
              data:  [{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]

            //onderstaand is een setje statische test data
            //data: [{
            //    name: "Bouwend",
            //    y: 3
            //}, {
            //    name: "Build succesvol",
            //    y: 64,
            //    sliced: true,
            //    selected: true
            //}, {
            //    name: "Build gefaald",
            //    y: 33
            //}]
        }]
            });
        });
    </script>
    <style type="text/css">
        .center-block {
            display: block;
            margin-right: auto;
            margin-left: auto;
        }
        .col-centered{
            float: none;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row" style="display: block">
            <a href="http://vm-eli-007/ccnet/ViewFarmReport.aspx" target="_parent">
                @*<div class="col-md-1" id="container" style=" min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>*@
                <div class="col-md-1" id="container" style=" min-width: 90%; height: 90%; max-width: 600px; margin: 0 auto"></div>
            </a>
            <br/>
            <div class="col-centered"><span> Oldest build time: @ViewData["eldestbuildtime"]</span></div>
        </div>
</div> 

</body>
</html>

Answer 1

尝试更新这样的代码：

data: JSON.parse("@Html.Raw(@ViewData["data"])")

Json字符串在highcharts中没有转义字符

1 个答案: