使用 google ApI 创建图表

Question

您好，我想使用 Google API 创建图表，我已经编写了检索代码来自 MVC 控制器中数据库的数据所有精细数据都来了，但它给出了一个错误，如 "All series on a given axis must be of the same data type×"... 我有错误的地方有人可以帮忙吗？？

这是我的 .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>

这是我的控制器绑定数据的代码

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

这个 link 比我更清楚地阐明了这一点

使用 google ApI 创建图表

Creating a Chart using google ApI

google-visualization

pygooglechart