Question

所以我有这张图表：

$(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：抱歉我的英文不好

Answer 1

您基本上需要创建一个以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);
  }
}

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

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

将值传递给脚本以更改图表

1 个答案: