Question

您好我想使用Google API创建图表，我已经编写了检索代码来自MVC控制器中数据库的数据所有精细数据都会出现，但它会给出一个错误，例如“给定轴上的所有系列必须是相同的数据类型×”......我有错误，任何人都可以帮忙这样做吗？

这是我的.cshtml代码

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    $.get('/Chart/GetData', {},
        function (data) {
            var tdata = new google.visualization.DataTable();

            tdata.addColumn('number', 'Bank_Code');
            tdata.addColumn('number', 'Branch_Code');
            tdata.addColumn('number', 'Branch_ID');
            tdata.addColumn('string', 'Branch_Location');


            for (var i = 0; i < data.length; i++){
                tdata.addRow([data[i].Bank_Code, data[i].Branch_Code, data[i].Branch_ID, data[i].Branch_Location]);
            }

            var option = { title: "Bank Details" };

            var chart = new   google.visualization.AreaChart(document.getElementById('chart_div'));
            chart.draw(tdata, option);
        });
}

</script>


<div id="chart_div" style="width:900px;height:500px"></div>

此My Controller的绑定数据代码

public ActionResult GetData()
   {
        return Json(CreatBankList(), JsonRequestBehavior.AllowGet);
    }

    private IEnumerable<BankModel> CreatBankList()
    {
        List<BankModel> BankDetails = new List<BankModel>();

        MORESAND_TCUK_ERP_DBEntities dbContext = new MORESAND_TCUK_ERP_DBEntities();
        var list = dbContext.bank_branch.ToList();

        foreach (var item in list)
        {
            BankDetails.Add(new BankModel()
            {
                Branch_ID = item.bank_branch_id,
                Bank_Code = item.bank_code,
                Branch_Code = item.branch_code,
                Branch_Location = item.branch_location
            });
        }

        return BankDetails;
    }

Answer 1

看起来您选择的图表类型是面积图，而您扔的数据不是正确的格式。例如，对于面积图，我会将第一列作为x轴，然后将下一列作为图表中的系列。例如：

[年，销售，费用]，[2014,2000,3000]，[2015,3000,4000]

我认为问题在于你将最后一列作为字符串，因此图表对如何绘制它感到困惑。

https://developers.google.com/chart/interactive/docs/gallery/areachart

此链接比我更清楚地说明了这一点

使用谷歌ApI创建图表

1 个答案: