将值传递给Script以更改图表

Pass values to Script to change a chart

本文关键字：Script 值传      更新时间：2023-11-22

所以我有这个图表：

$(function () {
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title:{
            text: "Evolução do seu saldo "
        },
        axisX:{
            title: "Data",
            titleFontColor: "green",
            titleFontWeight: "bold"
        },
        axisY:{
            title: "Saldo",
            titleFontWeight: "bold",
            titleFontColor: "green"
        },
        data: [
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            color: "green",
            type: "line",
            dataPoints: [
                { x: 10, y: 10 },
                { x: 20, y: 12 },
                { x: 30, y: 8 },
                { x: 40, y: 14 },
                { x: 50, y: 6 },
                { x: 60, y: 24 },
                { x: 70, y: -4 },
                { x: 80, y: 10 }
            ]
        }
        ]
    });
    chart.render();
}
});

我想做的是将数据库中的值传递到控制器中，并更改x和y上的图表值，但我不知道如何将控制器中的值直接传递到脚本，因为我希望图表最初将数据库中定义的值传递给x和y，我该如何解决？

Ps：对不起我的英语不好

您基本上需要创建一个以json格式返回数据的端点。让我们从创建一个视图模型开始，该模型表示您想要的数据

public class ChartData
{
    public string title { set; get; }
    public Axis axisX { set; get; }
    public Axis axisY { set; get; }
    public Data data { set; get; }
}
public class Axis
{
    public string title { set; get; }
    public string titleFontColor { set; get; }
}
public class Data
{
    public string color { set; get; }
    public List<DataPoint> data { set; get; }
}
public class DataPoint
{
    public int x { set; get; }
    public int y { set; get; }
}

现在，创建一个控制器，并在其中创建一个返回数据的操作方法。

public class ChartController : Controller
{
  public ActionResult ChartData()
  {
       var v=new ChartData();
        v.title = "Some";
        v.axisX = new Axis
        {
            title = "Title"
        };
        v.axisY = new Axis()
        {
            title = "Tes",
            titleFontColor = "red"
        };
        v.data = new Data
        {
            color = "blue",
            data = new List<DataPoint>()
            {
                new DataPoint {x = 10, y = 20},
                new DataPoint {x = 10, y = 20},
                new DataPoint {x = 10, y = 20},
                new DataPoint {x = 10, y = 20}
            }
        };
        return Json(v,JsonRequestBehavior.AllowGet);
  }
}

我在动作方法中对值进行了硬编码。我不知道你的数据库结构如何，也不知道如何获取这些数据。您的工作是使用数据访问代码将硬编码的值替换为db表中的实际值。现在，在页面的document ready事件中，调用此操作方法并获取数据，使用它来呈现图表

$(function(){
  var url = "@Url.Action("ChartData","Chart")";
  $.getJSON(url,function(data){
      var chart = new CanvasJS.Chart("chartContainer",data);
      chart.render();
  });
});
相关文章：