2014-02-13 27 views
0

我有一个MVC应用程序,并想澄清一些关于如何使用数据库中的数据实现图的疑问。 我正在使用jquery从数据库中获取值,但不明白如何捕获这些值并使用Highcharts生成图表,我在互联网上阅读了很多内容,但尚不清楚如何获取和放置值在x轴和y轴上。jquery highcharts multiline mvc asp.net

用于Y轴x的值,并且,我使用以下:

Dictionary <decimal, decimal> dataResult = new Dictionary <decimal, decimal>(); 

艾做查询在数据库上,骑如下:

foreach (var item in query) 
{ 
     dataResult.Add (Convert.ToDecimal (item.valorinicial), Convert.ToDecimal (item.preco)); 

} 

通过该值:

return Json (dataResult, JsonRequestBehavior.AllowGet); 

要生成图表:

$(document).ready(function() { 
    $("#Submit").click(function (evt) { 
    // 
    //Caught some variaiveis 
    // 

     var options = { 
      chart: { 
       backgroundColor: '#ffffff', 
       borderColor: '#a2a2a1', 
       borderWidth: 0, 
       borderRadius: 0, 
       renderTo: 'container', 
       type: 'area', 
       plotBackgroundColor: '#fffdf6' 
      }, 
      colors: ['#3399FF'], 
      legend: { 
       enabled: false 
      }, 

      title: { 
       text: 'Graf' 
      }, 
      tooltip: { 
       borderRadius: 0, 
       borderWidth: 0, 
       shadow: false, 
       style: { 
        fontSize: '7pt', 
        color: '#000000' 
       }, 
       formatter: function() { 
        return this.value 
       } 
       }, 
       xAxis: { 

        labels: { 
         rotation: -45, 
         x: 0, 
         y: 40, 
         style: { 
          color: '#333333' 
         } 
        }, 
        lineWidth: 1, 
        lineColor: '#333333', 
        minPadding: 0, 
        maxPadding: 0, 
        title: { 
         text: '' 
        }, 
        tickInterval: 2, 
        tickmarkPlacement: 'on' 
       }, 
       yAxis: { 
        gridLineWidth: 0, 
        labels: { 
         formatter: function() { 
          return this.value}, 
         style: { 
          color: '#333333' 
         } 
        }, 
        lineWidth: 1, 
        lineColor: '#333333', 
        min: 0, 
        minPadding: 0, 
        maxPadding: 0, 
        title: { 
         text: '' 
        } 
       }, 
       series: [{ data: [] }] 
      } 
     jQuery.get("/ChartLev/GetByGraf", { ...some parameters....} }, 
      function (data) { 
       $.each(data, function (key, val) { 
        options.series.data.push({ 
         name: val.key, 
         y: val.Value 
        }) 

       }); 

       chart_answer = new Highcharts.Chart(options); 
     }); 
    }); 
}); 

我不知道为什么标题只出现。

+0

任何错误?如果没有,你可以附加JSON例子吗?此外,首先生成空图表,然后调用'$ .get()' –

回答

0

因为你叫addSeries,初始化图表之前,所以你需要在JavaScript控制台这一系列推到的物体,像这种情况下

var options = { 
     //chart options 
     series: [{ 
      data:[] 
     }] 
    } 

$.each(data, function (key, val) { 
         options.series.data.push({ 
          name: val.key, 
          y: va.Value 
         }) 

        }); 

chart_answer = new Highcharts.Chart(options); 
+0

如图所示,但不是用于生成图表,Saberi告诉我我要去哪里出错。我将代码作为响应验证。 – rysahara