d3 chart SqlQuery

时间:2015-06-15 14:32:02

标签: .net asp.net-mvc d3.js charts

i'm writing a .net app with mvc5 ef 6 and i need to create chart. I find d3 library but i need to pass a sql data.

i have a d3.js pie chart with a static data on it.

 <script>
          (function (d3) {
             'use strict';


            var dataset = [
              { label: 'Abulia', count: 35 },
              { label: 'Betelgeuse', count: 20 },
              { label: 'Cantaloupe', count: 40 },
              { label: 'Dijkstra', count: 5 }
            ];
            var width = 500;
            var height = 200;
            var radius = Math.min(width, height) / 2;
            var donutWidth = 75;
            var legendRectSize = 28;
            var legendSpacing = 4;

            var color = d3.scale.ordinal()
            .range(['#66B615','#3BFF5A','#77E863','#2AE87E']);

            var svg = d3.select('#chart2')
              .append('svg')
              .attr('width', width)
              .attr('height', height)
              .append('g')
              .attr('transform', 'translate(' + (width / 2) +
                ',' + (height / 2) + ')');

            var arc = d3.svg.arc()
              .outerRadius(radius);

            var pie = d3.layout.pie()
              .value(function (d) { return d.count; })
              .sort(null);

            var path = svg.selectAll('path')
              .data(pie(dataset))
              .enter()
              .append('path')
              .attr('d', arc)
              .attr('fill', function (d, i) {
                  return color(d.data.label);
              });

I need to pass data from db. How can i do it?

1 个答案:

答案 0 :(得分:1)

你需要在控制器中创建一个方法,通过actionResult上的[HttpPost] attrribute从sql中获取数据。

例如:

[HttpPost]
public ActionResult getData(params)// variables to be passed to sp
{
    modelobject mo = new modelobject ();//the data from your model where the sp is called;
data d = mo.methodname(params);// method calling sp
return Json(d , JsonRequestBehavior.AllowGet);
}

在你的Js中,调用javascript Ajax方法来获取数据,或者你是否使用了角度调用$ http服务请求。