Question

我是编程新手，并拥有一个与硬币相关的数据的json对象。我想从json对象获取数据并使用谷歌图表显示它。但是我似乎无法让它工作。任何输入都表示赞赏。

Json对象

    [{"id":1,"CoinValue":"0.01","Count":82,"CoinWeight":76},
{"id":2,"CoinValue":"0.02","Count":86,"CoinWeight":18},
{"id":3,"CoinValue":"0.05","Count":29,"CoinWeight":42},
{"id":4,"CoinValue":"0.1","Count":35,"CoinWeight":90},
{"id":5,"CoinValue":"0.2","Count":23,"CoinWeight":3},
{"id":30,"CoinValue":"0.5","Count":41,"CoinWeight":36}]

硬币类

    public class Coin
    {
        public int ID
        {
            get;
            set;
        }

        public string CoinValue
        {
            get;
            set;
        }

        public int Count
        {
            get;
            set;
        }

        public int CoinWeight
        {
            get;
            set;
        }

}

硬币模型：

public class CoinModel
    {
        public IList<Coin> coins;
    }

硬币控制器：我怀疑数据方法需要更改才能将每条记录添加到列表中

        // GET: Coin
    public ActionResult Index()
    {

        return View();
    }
    public ActionResult Data()
    {
        var fileContents = System.IO.File.ReadAllText(@"H:\EasyAsPiMVC\EasyAsPiMVC\App_Data\MOCK_DATA.json");
        var coins = JsonConvert.DeserializeObject<List<CoinModel>>(fileContents);



        return Json(coins);
    }

查看

<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        type: 'POST',
        dataType: "Json",
        contentType: "application/json",
        url: '@Url.Action("Data", "Coin")',
        success: function (result) {
            google.charts.load('current', {
                'packages': ['corechart']
            });
            google.charts.setOnLoadCallback(function () {
                drawChart(result);
            });
        }
    });

    function drawChart(result) {
        var data = new google.visualization.DataTable();
        data.addColumn("string", "CoinValue"); //might have to be changed
        data.addColumn("number", "Count");
        var dataArray = [];
        $.each(result, function (i, obj) {
            dataArray.push([obj.CoinValue, obj.Vounter]);
        });
        data.addRows(dataArray);

        var piechart_options = {
            title: 'Coin Tracker Piechart',
            width: 400,
            height: 300
        };

        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);

        var barchart_options = {
            title: 'Coin Tracker barchart',
            width: 400,
            height: 300,
            legend: 'none'
        };

        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
    }
});
</script>

观看HTML：

<body>
    <table class="columns">
        <tr>
            <td><div id="piechart_div" style="border:1px solid #ccc"></div></td>
            <td><div id="barchart_div" style="border:1px solid #ccc"></div></td>

        </tr>
    </table>
</body>

Answer 1

您当前的代码返回了CoinModel个对象的列表，并且在$.each循环中，您正在访问每个项目的CoinValue和Vounter属性。但是CoinModel对象只有一个属性coins，它是Coin个对象的列表。

您所要做的就是确保您发送的数据和$.each代码匹配。例如，如果您的操作方法返回Coin个对象的列表，您可以在客户端循环访问它们并访问每个项目的CoinValue属性值

public ActionResult Data()
{
    var coins = new List<Coin>
    {
        new Coin() {Count = 1, CoinValue = "Aa",CoinWeight = 50},
        new Coin() {Count = 2, CoinValue = "Bb",CoinWeight = 20},
        new Coin() {Count = 3, CoinValue = "Cc",CoinWeight = 30}
    };
    return Json(coins);
}

现在在客户端，您将遍历此json数组，然后您可以访问每个项目的CoinValue和CoinWeight属性，并使用它来构建渲染所需的另一个数组图表

var dataArray = [];
$.each(result, function (i, obj) {
    dataArray.push([obj.CoinValue, obj.CoinWeight]);
});
data.addRows(dataArray);

将JSON对象传递到列表中

1 个答案: