Google Chart и Chart.Js, Перешлите переменную C # на сторону Script в Asp .NET Core 2.2 - PullRequest
Новая
       15

Google Chart и Chart.Js, Перешлите переменную C # на сторону Script в Asp .NET Core 2.2

0 голосов
/ 20 апреля 2019

Я занимаюсь разработкой веб-приложения на ASP .Net Core 2.2. Я должен остановиться на проблеме, потому что я новичок в .Net Core.

ASP В .Net Core у меня есть два массива int в бэкэнде.

Я хочу показать их на различных графиках, таких как изогнутые линии и гистограмма, но я не смог оценить их в структуре скрипта, хотя мог использовать переменные, которые я взял из класса через @ model. 

//My Arrays I want to use each integers.

//x axis

int[] x_ekseni_olculen_yillar = { 1997, 2003, 2005, 2009, 2014, 2018, 2019 };


//y axis

int[] y_ekseni_ofke_katsayisi = { 1, 3, 5, 3, 1, 18, 9 };

Как видно из двух кодовых блоков, которые я проиллюстрировал выше, данные были введены в кодовые блоки. На данный момент я хочу манипулировать данными с помощью набора данных, а не вводить данные вручную. Как передать массивы int ниже в эти блоки кода? Элементы этих int-массивов будут получены в результате вычислений, и как мне извлечь кривую из массивов в обоих типах Chart? 

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>`enter code here`
</html>

1 Ответ

0 голосов
/ 24 апреля 2019

Вы можете использовать @Html.Raw(Json.Serialize(Model)) в js для сериализации вашей модели и получения всех данных.Затем упорядочите данные в нужный формат.

1. Предположим, у вас есть модель: 

public class ChartData
{
    public int[] Data_Axis_X { get; set; }
    public int[] Data_Axis_Y { get; set; }

}

2.Ваше действие: 

public IActionResult MyChart()
    {
        var model = new ChartData
        {
            Data_Axis_X = new int[] { 1997, 2003, 2005, 2009, 2014, 2018, 2019 },
            Data_Axis_Y = new int[] { 1, 3, 5, 3, 1, 18, 9 }
        };
        return View(model);
    }

3. Мой график.cshtml (не забудьте добавить ссылку на jquery в свой проект) 

@model ChartData
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> 
</script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var model = @Html.Raw(Json.Serialize(Model));
        var allData = [];
        allData.push(['Year', 'Sales']);


        $.each(model.data_Axis_X, function (index, item) {
            var array = [];
            array.push(item);
            array.push(model.data_Axis_Y[index]);
            allData.push(array);
            console.log(Alldata);
    });

        var data = google.visualization.arrayToDataTable(allData);

        var options = {
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
    }
</script>

Результаты:

enter image description here

...