Plotly ASP. NET Core MVC Ajax Json Вызов - PullRequest
Новая
       24

Plotly ASP. NET Core MVC Ajax Json Вызов

0 голосов
/ 22 января 2020

Здравствуйте, я использую Plotly JavaScript Открытую библиотеку графиков в моем проекте. NET CORE MVC. Я не знаю, как я могу использовать мои JSON данные на осях моей гистограммы. Здесь я использовал для выборки данных по умолчанию для использования гистограммы.

Index.cs html 

<div id="locationDiv"></div>

<script>
    var trace1 = {
        type: 'bar',
        x: ["İstanbul", "Ankara", "İzmir", "Antalya"],
        y: [50, 40, 20, 15],
        marker: {
            color: '#C8A2C8',
            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 });
</script>

здесь вывод просмотреть этот код

И я пытаюсь получить значения оси X из моей базы данных.

Index.cs html

<div id="locationDiv"></div>

@section scripts {
    <script>
        $.ajax({
            type: "POST",
            url: "/Line/Dashboards",
            dataSrc: "",
            success: function (response) {
                successFunc(response);
            }
        });

        function successFunc(jsondata) {
            var trace1 = {
                type: 'bar',
                json: jsondata, 
                x: "locationName", //Default value:= x: ["İstanbul", "Ankara", "İzmir"],
//POSTMAN result:= [{"locationName": "İstanbul"},{"locationName": "Ankara"},{"locationName": "İzmir"}]
                y: [50, 40, 20],
                marker: {
                    color: '#3399FF',
                    line: {
                        width: 2.5
                    }
                }
            };
            var locationData = [trace1];

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

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

LineController .cs 

[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"}]

1 Ответ

0 голосов
/ 23 января 2020

Попробуйте следующий метод: 

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 });
    }

Ссылка: https://plot.ly/javascript/axes/#set -и-стиль-оси-заголовки-метки-и-галочки

...