从数据库（SQL）中检索数据并使用 MVC 在图形中显示？答案

【问题标题】：Retrieve data from database (SQL) and display in graph using MVC?从数据库（SQL）中检索数据并使用 MVC 在图形中显示？
【发布时间】：2020-07-11 15:34:39
【问题描述】：

我想要做的是从两行中获取数据作为 x 和 y 轴，并且该数据应该显示在条形图中。

这是我正在做的事情：

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Bar Chart Example <small>With custom colors.</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#">Config option 1</a>
                            </li>
                            <li>
                                <a href="#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="flot-chart">
                        <div class="flot-chart-content" id="flot-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/plugins/flot")

    <script type="text/javascript">
        $(document).ready(function () {
            var barOptions = {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.6,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.8
                            }, {
                                opacity: 0.8
                            }]
                        }
                    }
                },
                xaxis: {
                    tickDecimals: 0
                },
                colors: ["#1ab394"],
                grid: {
                    color: "#999999",
                    hoverable: true,
                    clickable: true,
                    tickColor: "#D4D4D4",
                    borderWidth: 0
                },
                legend: {
                    show: false
                },
                tooltip: true,
                tooltipOpts: {
                    content: "x: %x, y: %y"
                }
            };
            var barData = {
                label: "bar",
                data: [          **//here i want to set a query to get data from database**
                        [1, 40],
                        [2, 25],
                        [3, 19],
                        [4, 34],
                        [5, 32],
                        [6, 22]
                    ]
                };
            $.plot($("#flot-bar-chart"), [barData], barOptions);
            var barOptions = {
                series: {
                    lines: {
                        show: true,
                        lineWidth: 2,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.0
                            }, {
                                opacity: 0.0
                            }]
                        }
                    }
                },
                xaxis: {
                    tickDecimals: 0
                },
                colors: ["#1ab394"],
                grid: {
                    color: "#999999",
                    hoverable: true,
                    clickable: true,
                    tickColor: "#D4D4D4",
                    borderWidth: 0
                },
                legend: {
                    show: false
                },
                tooltip: true,
                tooltipOpts: {
                    content: "x: %x, y: %y"
                }
            };
            var barData = {
                label: "bar",
               data: [          **//here i want to set a query to get data from database**
                        [1, 40],
                        [2, 25],
                        [3, 19],
                        [4, 34],
                        [5, 32],
                        [6, 22]
                    ]
            };

            doPlot("right");

            $("button").click(function () {
                doPlot($(this).text());
            });
        });

    </script>
}

如何实现呢？我可以在这里设置查询还是应该在控制器中管理它？像这样

例如，如果我在 SQL 中有一个名为 Sale 的表，并且有两条记录“Sales & Year”，我想在 x 轴上显示年份，在 y 轴上显示销售额。

【问题讨论】：

标签： javascript sql sql-server asp.net-mvc graph

【解决方案1】：

EntityFramework.SqlServer.dll 中出现“System.NotSupportedException”类型的异常，但未在用户代码中处理其他信息：

var wokerData = db.Workers.Select(s => new WorkerModel { Name = s.Name, Salary = s.Salary }).ToList();


            var baseWorkerModel = new BaseWorkerModel()
            {
                ChartName = "Anything",
                ChartData = wokerData
            };

            return View(baseWorkerModel);

}

public class BaseWorkerModel
    {
        public string ChartName { get; set; }
        public List<WorkerModel> ChartData { get; set; }
        public List<WorkerModel> WorkerData { get; set; }
    }

【讨论】：

【解决方案2】：

也许可以通过这种方式帮助你：

函数中的第一个单独代码：

/**
 * Get data from server
 */
const getChartData = function(data) {
  return new Promise((resolve, reject) => {
    try {
      $.ajax({
        data: data,        
        method: 'GET', // or POST
        url: '[Controller/Action/????]'
      }).done(data => {
        resolve({state: 'done', data: data});
      }).fail(errorThrown => {
        reject({state: 'fail', data: errorThrown});
      });
    }
    catch(error) {
      reject({state: 'catch', data: error});
    }
  });
};

/**
 * Draw chart
 */
const drawChart = function(chartData) {
  var barOptions = {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.6,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.8
                            }, {
                                opacity: 0.8
                            }]
                        }
                    }
                },
                xaxis: {
                    tickDecimals: 0
                },
                colors: ["#1ab394"],
                grid: {
                    color: "#999999",
                    hoverable: true,
                    clickable: true,
                    tickColor: "#D4D4D4",
                    borderWidth: 0
                },
                legend: {
                    show: false
                },
                tooltip: true,
                tooltipOpts: {
                    content: "x: %x, y: %y"
                }
            };
            var barData = {
                label: "bar",
                data: chartData // Chart data input parameter to function 
                };
            $.plot($("#flot-bar-chart"), [barData], barOptions);
            var barOptions = {
                series: {
                    lines: {
                        show: true,
                        lineWidth: 2,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.0
                            }, {
                                opacity: 0.0
                            }]
                        }
                    }
                },
                xaxis: {
                    tickDecimals: 0
                },
                colors: ["#1ab394"],
                grid: {
                    color: "#999999",
                    hoverable: true,
                    clickable: true,
                    tickColor: "#D4D4D4",
                    borderWidth: 0
                },
                legend: {
                    show: false
                },
                tooltip: true,
                tooltipOpts: {
                    content: "x: %x, y: %y"
                }
            };
            var barData = {
                label: "bar",
               data: chartData // Chart data input parameter to function                     
            };
  doPlot("right");
}

按钮点击中的下一步可以使用：

$('button').on('click', function(e) {
  getChartData(...).then(result => { // ... means parameters need to send to server
    drawChart(result['data']); 
    doPlot($(this).text()); //??
  }).catch(error => { 
    console.log(error); 
  });
});

================================================ ============================== 更新 [基于 cmets]

public class BaseWorkerModel
{
  public string ChartName { get; set; }
  public List<WorkerModel> WorkerData { get; set; }
}

public class WorkerModel 
{ 
  public int ID { get; set; } 
  public string Name { get; set; } 
  public string Position { get; set; } 
  public string Office { get; set; } 
  public string Extn { get; set; } 
  public string Salary { get; set; } 
}

实际上，您需要从数据创建列表

public ActionResult GetChartData()
{
  // with this code you can retrieve list of WorkerModel based on your data
  // note: if salary is float or double change data type to double
  var wokerData = db.Workers.Select(s => new WorkerModel { Name = s.Name, Salary = s.Salary }).Tolist();

  var baseWorkerModel = new BaseWorkerModel()
  {
    ChartName = "Anything",
    WorkerData = wokerData
  };

  return View(baseWorkerModel);
}

现在在第一行视图添加

@model BaseWorkerModel

如果你的视图中有js代码内联，你可以访问模型数据看这个链接Access model in js

================================================ ============================== 新更新

1- 我使用 chart.js 库来绘制任何图表类型。 2- 在 Models 文件夹中，我创建了具有这种结构的模型

public class ChartDataModel
{
  public string ChartName { get; set; }

  public List<string> ChartLabel { get; set; }

  public List<int> ChartData { get; set; }
}

3- 在我们的控制器中，我初始化了模型实例并设置数据和标签并将模型传递给视图

public ActionResult Index()
{
  var chartDataModel = new Models.ChartDataModel()
  {
    ChartData = new List<int>() { 12, 19, 3, 5, 2, 3 },
    ChartLabel = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
    ChartName = "Chart JS demo"
};

  return View(chartDataModel);
}

4- 在 index.cshtml 第一个导入模型和 javascript 代码部分我使用了这个模型属性

@model ChartDemo1.Models.ChartDataModel
<!-- canvas for draw chart -->
<canvas id="myChart" width="400" height="100"></canvas>

@section scripts {
    <script type="text/javascript">
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @Html.Raw(Json.Encode(Model.ChartLabel)),
                datasets: [{
                    label: "@Model.ChartName",
                    data: @Html.Raw(Json.Encode(Model.ChartData)),
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
}

现在，你有一个 Chart.js 绘制的条形图，我使用静态数据，但你可以从任何数据源填充图表。

注意：记得在主布局中添加 chart.min.js 和 chart.min.css。

注意：您可以将图表配置作为模型传递给背景等...

【讨论】：

但我想从数据库中获取数据，然后使用 char.js 以 char 形状显示。
@AbdulQayyum 你有指定查看的模型吗？使用 getData 函数，您可以从控制器获取数据，在控制器中，您可以创建与数据库的连接和查询以及以 json 格式的结果数据，除此之外，如果您的脚本在 [viewname].cshtml 中，您可以使用模型或使用 TempData 或 ViewBag 和在 js 代码中调用这个 viewbag 或 tempdata ``` data: @ViewBag.ChartData OR data: @TempData["ChartData"] 或 data: @Model.ChartData ```
我刚刚在控制器中添加了这个public ActionResult Index() {`ArrayList xvalues = new ArrayList();ArrayList yvalues = new ArrayList();var results = (from c in db.Workers select c);results.ToList().ForEach(rs => xvalues.Add(rs.Name));results.ToList().ForEach(rs => yvalues.Add(rs.Salary));return View();}`
然后在视图中使用它data: data[xvalus, yvalues]
为了从视图访问数据，您需要通过模型或视图包或临时数据传递数据或从 ajax 请求访问数据。您创建数据但未传递给视图。基于数据结构创建模型[C#类]并传递给视图，然后您可以在视图主体或内联javascript代码中从模型访问图表数据。

【解决方案3】：

我这次使用的是chart.js，正如你上一个回答中提到的，这是一个例子：

public ActionResult Index( )
{
  var worker = db.Workers.ToList<Worker>();
  //var chartData = new List<dynamic[]>();
  //var chartLabel = new List<dynamic[]>();
  //foreach (var item in worker) 
  //{
    //chartData.Add(new dynamic[] {item.Salary});
    //chartLabel.Add(new dynamic[] {item.Name});
  //}
  var chartData = worker.Select(s => s.Salary).ToList();
  var chartLabel = worker.Select(s => s.Name).ToList();
  ViewBag.ChartData = chartData;
  ViewBag.ChartLabel = chartLabel;
  return View();
}

    <script type="text/javascript">
      $(document).ready(function () {
          var barData = {
              labels: @Html.Raw(Json.Encode(ViewBag.ChartLabel)),
              datasets: [
                  {
                      label: "Bar Chart Demo",
                      backgroundColor: 'rgba(26,179,148,0.5)',
                      borderColor: "rgba(26,179,148,0.7)",
                      pointBackgroundColor: "rgba(26,179,148,1)",
                      pointBorderColor: "#fff",
                      data: @Html.Raw(Json.Encode(ViewBag.ChartData)),
                  }
              ]
          };

          var barOptions = {
              responsive: true
          };

          var ctx2 = document.getElementById("barChart").getContext("2d");
          new Chart(ctx2, { type: 'bar', data: barData, options: barOptions });
      });
    ...

这是输出，因为它显示来自数据库的标签，但没有图表数据“Salary”。

【讨论】：

首先，如果您检查了我的 chart.js 示例，您可以看到我使用模型和获取数据作为基本类型，而不是动态类型。接下来，您告诉我使用了另一个图表库。对于 chart.js，只需检查我的 New Update on my answer 即可。我还编辑了您的帖子并修复了错误，希望对您有所帮助。