Plotly ASP.NET核心MVC Ajax Json调用

您好，我在.NET核心MVC项目中使用JavaScript开源图形库。我不知道如何在条形图的轴上使用JSON数据。 在这里，我使用条形图对默认数据进行采样

Index.cshtml

我的道路是正确的。我和邮递员试过，结果是

[{"locationName": "İstanbul"},{"locationName": "Ankara"},{"locationName": "İzmir"}]

---

请尝试以下方法：

function successFunc(jsondata) {
        function unpack(rows, key) {
            return rows.map(function(row) { return row[key]; });
        }

        var x = unpack(jsondata, 'locationName');
        var trace1 = {
            type: 'bar',
            json: jsondata,
            x: x, 
            y: [50, 40, 20,15],
            marker: {
                color: '#3399FF',
                line: {
                    width: 2.5
                }
            }
        };
        var locationData = [trace1];

        var locationLayout = {
            title:'Locations',
            yaxis: {
                title: 'number'
            },
            xaxis: {
                title: 'location name'
            },
            font: { size: 18 }
        };

        Plotly.newPlot('locationDiv', locationData, locationLayout, { responsive: true });
    }

---

参考资料：

我刚刚编辑了这段代码，因为我有3个x轴数据<代码>y:[50,40,20]，谢谢@Xueli Chen:）

[HttpPost]
public IActionResult Dashboards()
{
    var dashboardDataList = _lineService.GetLineList();
    var totalRecords = dashboardDataList.Count();

    var DashboardDataResult = from line in dashboardDataList
                              select new
                             {
                                 LocationName = line.Location.LocationName                                         
                             };

    DashboardDataResult = DashboardDataResult.Distinct();

    return Json(DashboardDataResult);
}

[{"locationName": "İstanbul"},{"locationName": "Ankara"},{"locationName": "İzmir"}]

function successFunc(jsondata) {
        function unpack(rows, key) {
            return rows.map(function(row) { return row[key]; });
        }

        var x = unpack(jsondata, 'locationName');
        var trace1 = {
            type: 'bar',
            json: jsondata,
            x: x, 
            y: [50, 40, 20,15],
            marker: {
                color: '#3399FF',
                line: {
                    width: 2.5
                }
            }
        };
        var locationData = [trace1];

        var locationLayout = {
            title:'Locations',
            yaxis: {
                title: 'number'
            },
            xaxis: {
                title: 'location name'
            },
            font: { size: 18 }
        };

        Plotly.newPlot('locationDiv', locationData, locationLayout, { responsive: true });
    }