2013-04-01 47 views
0

custom_scripts_graph.js(AJAX交)DotnetHighcharts ajax加载数据?

$.ajax({ 
    type: "POST", 
    url: app_base_url + 'Graph/_IrregularChart', 
    contentType: 'application/json; charset=utf-8', 
    dataType: "json", 
    data: chartParams, 
    success: function (result) { 
     $("#chart").html(result); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     alert(xhr.status); 
     alert(thrownError); 
    } 
}); 

控制器

public ActionResult _IrregularChart(IrregularChartParams chartParams) 
{ 
    IEnumerable<MeterReadingsChartData> irregularChartData = MeterReadingsManager.GetMeterReadingsIrregularChartData(chartParams); 
    Series[] series = ChartDataManager.GetIrregularChartData(irregularChartData).ToArray(); 

    Highcharts chart = new Highcharts("irregularChart") 
     .InitChart(new Chart { DefaultSeriesType = ChartTypes.Line, ZoomType = ZoomTypes.Xy, Height = 300 }) 
     .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } }) 
     .SetTitle(new Title { Text = "Başlık" }) 
     .SetSubtitle(new Subtitle { Text = "AltBaşlık" }) 
     .SetLegend(new Legend 
     { 
      Layout = Layouts.Vertical, 
      VerticalAlign = VerticalAligns.Top, 
      Align = HorizontalAligns.Right, 
      Shadow = true, 
      BackgroundColor = ColorTranslator.FromHtml("#FFFFFF"), 
      Floating = true 
     }) 
     .SetXAxis(new XAxis 
     { 
      Type = AxisTypes.Datetime, 
      DateTimeLabelFormats = new DateTimeLabel { Month = "%e. %b", Hour = "%H:%M", Year = "%Y" } 
     }) 
     .SetYAxis(new YAxis 
     { 
      Title = new YAxisTitle { Text = "yaxis title" }, 
      Labels = new YAxisLabels 
      { 
       Formatter = @"function() { return this.value; }" 
      } 
     }) 
     .SetCredits(new Credits { Enabled = false }) 
     .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%e. %b - %H:%M', this.x) +' : <b>'+ Highcharts.numberFormat(this.y, 2); +'</b>'; }" }) 
     .SetSeries(series); 

    return PartialView(chart); 
} 

chart.cshtml

<script src="@Url.Content("~/Scripts/custom_scripts_graph.js")" type="text/javascript"></script> 
<div id="chart"> 
</div> 

_IrregularChart.cshtml(局部视图)

@model DotNet.Highcharts.Highcharts 
@Model 

错误:

意外标记<

所有的数据是真实的。 Ajax响应:

<div id='irregularChart_container'></div> <script type='text/javascript'> Highcharts.setOptions({ global: { useUTC: false } }); var irregularChart; $(document).ready(function() { irregularChart = new Highcharts.Chart({   chart: { renderTo:'irregularChart_container', defaultSeriesType: 'line', height: 300, zoomType: 'xy' },   credits: { enabled: false },  legend: { align: 'right', backgroundColor: '#FFFFFF', floating: true, layout: 'vertical', shadow: true, verticalAlign: 'top' },   plotOptions: { line: { lineWidth: 3, marker: { enabled: true, states: { hover: { enabled: true, radius: 5 } } }, states: { hover: { lineWidth: 3 } } } },  subtitle: { text: 'AltBaşlık' },  title: { text: 'Başlık' },   tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%e. %b - %H:%M', this.x) +' : <b>'+ Highcharts.numberFormat(this.y, 2); +'</b>'; } },  xAxis: { dateTimeLabelFormats: { hour: '%H:%M', month: '%e. %b', year: '%Y' }, type: 'datetime' },   yAxis: { labels: { formatter: function() { return this.value; } }, title: { text: 'yaxis title' } },  series: [{ data: [[Date.parse('03/26/2013 00:00:00'), 
219.666666666667], [Date.parse('03/26/2013 01:00:00'), 219.333333333333], [Date.parse('03/26/2013 02:00:00'), 220], [Date.parse('03/26/2013 03:00:00'), 219.666666666667], [Date.parse('03/26/2013 04:00:00'), 220], [Date.parse('03/26/2013 05:00:00'), 219.333333333333], [Date.parse('03/26/2013 06:00:00'), 219], [Date.parse('03/26/2013 07:00:00'), 220], [Date.parse('03/26/2013 08:00:00'), 219.666666666667], [Date.parse('03/26/2013 09:00:00'), 220], [Date.parse('03/26/2013 10:00:00'), 220], [Date.parse('03/26/2013 11:00:00'), 220], [Date.parse('03/26/2013 12:00:00'), 219.666666666667], [Date.parse('03/26/2013 13:00:00'), 220], [Date.parse('03/26/2013 14:00:00'), 219.5], [Date.parse('03/26/2013 15:00:00'), 220], [Date.parse('03/26/2013 16:00:00'), 220], [Date.parse('03/26/2013 17:00:00'), 220], [Date.parse('03/26/2013 18:00:00'), 
219.666666666667], [Date.parse('03/26/2013 19:00:00'), 220], [Date.parse('03/26/2013 20:00:00'), 219.666666666667], [Date.parse('03/26/2013 21:00:00'), 219], [Date.parse('03/26/2013 22:00:00'), 219.5], [Date.parse('03/26/2013 23:00:00'), 219], [Date.parse('03/27/2013 00:00:00'), 219.5], [Date.parse('03/27/2013 01:00:00'), 220], [Date.parse('03/27/2013 02:00:00'), 220], [Date.parse('03/27/2013 03:00:00'), 220], [Date.parse('03/27/2013 04:00:00'), 219.666666666667], [Date.parse('03/27/2013 05:00:00'), 
219.5], [Date.parse('03/27/2013 06:00:00'), 219.5], [Date.parse('03/27/2013 07:00:00'), 220], [Date.parse('03/27/2013 08:00:00'), 219.666666666667], [Date.parse('03/27/2013 09:00:00'), 220], [Date.parse('03/27/2013 10:00:00'), 220], [Date.parse('03/27/2013 11:00:00'), 220], [Date.parse('03/27/2013 12:00:00'), 219.5], [Date.parse('03/27/2013 13:00:00'), 220], [Date.parse('03/27/2013 14:00:00'), 219.666666666667], [Date.parse('03/27/2013 15:00:00'), 220], [Date.parse('03/27/2013 16:00:00'), 219.666666666667], [Date.parse('03/27/2013 17:00:00'), 220], [Date.parse('03/27/2013 18:00:00'), 220], [Date.parse('03/27/2013 19:00:00'), 220], [Date.parse('03/27/2013 20:00:00'), 219.666666666667], [Date.parse('03/27/2013 21:00:00'), 
219.666666666667], [Date.parse('03/27/2013 22:00:00'), 220], [Date.parse('03/27/2013 23:00:00'), 219.333333333333], [Date.parse('03/28/2013 00:00:00'), 219], [Date.parse('03/28/2013 01:00:00'), 219.333333333333], [Date.parse('03/28/2013 02:00:00'), 220], [Date.parse('03/28/2013 03:00:00'), 219.333333333333], [Date.parse('03/28/2013 04:00:00'), 219.666666666667], [Date.parse('03/28/2013 05:00:00'), 220], [Date.parse('03/28/2013 06:00:00'), 219], [Date.parse('03/28/2013 07:00:00'), 219.5], [Date.parse('03/28/2013 08:00:00'), 220], [Date.parse('03/28/2013 09:00:00'), 220], [Date.parse('03/28/2013 10:00:00'), 220], [Date.parse('03/28/2013 11:00:00'), 219.666666666667], [Date.parse('03/28/2013 12:00:00'), 219], [Date.parse('03/28/2013 13:00:00'), 220], [Date.parse('03/28/2013 14:00:00'), 219.5], [Date.parse('03/28/2013 17:00:00'), 219.5], [Date.parse('03/28/2013 18:00:00'), 219.666666666667], [Date.parse('03/28/2013 19:00:00'), 220], [Date.parse('03/28/2013 20:00:00'), 219], [Date.parse('03/28/2013 21:00:00'), 220], [Date.parse('03/28/2013 22:00:00'), 219], [Date.parse('03/28/2013 23:00:00'), 
219.333333333333], [Date.parse('03/29/2013 00:00:00'), 219.5], [Date.parse('03/29/2013 03:00:00'), 220], [Date.parse('03/29/2013 04:00:00'), 220], [Date.parse('03/29/2013 05:00:00'), 220], [Date.parse('03/29/2013 07:00:00'), 219], [Date.parse('03/29/2013 08:00:00'), 219.5], [Date.parse('03/29/2013 09:00:00'), 220], [Date.parse('03/29/2013 10:00:00'), 220], [Date.parse('03/29/2013 11:00:00'), 219.5], [Date.parse('03/29/2013 12:00:00'), 219], [Date.parse('03/29/2013 13:00:00'), 219.5], [Date.parse('03/29/2013 14:00:00'), 220], [Date.parse('03/29/2013 15:00:00'), 219.5], [Date.parse('03/29/2013 17:00:00'), 220], [Date.parse('03/29/2013 18:00:00'), 219.666666666667], [Date.parse('03/29/2013 19:00:00'), 220], [Date.parse('03/29/2013 20:00:00'), 220], [Date.parse('03/29/2013 21:00:00'), 219.5], [Date.parse('03/29/2013 22:00:00'), 219.333333333333], [Date.parse('03/29/2013 23:00:00'), 
219.666666666667], [Date.parse('03/30/2013 00:00:00'), 220], [Date.parse('03/30/2013 01:00:00'), 219.666666666667], [Date.parse('03/30/2013 02:00:00'), 219], [Date.parse('03/30/2013 03:00:00'), 219.333333333333], [Date.parse('03/30/2013 04:00:00'), 
219.333333333333], [Date.parse('03/30/2013 05:00:00'), 219.5], [Date.parse('03/30/2013 06:00:00'), 219], [Date.parse('03/30/2013 07:00:00'), 220], [Date.parse('03/30/2013 08:00:00'), 
219.333333333333], [Date.parse('03/30/2013 09:00:00'), 220], [Date.parse('03/30/2013 10:00:00'), 219.666666666667], [Date.parse('03/30/2013 11:00:00'), 219.5], [Date.parse('03/30/2013 12:00:00'), 220], [Date.parse('03/30/2013 13:00:00'), 219.5], [Date.parse('03/30/2013 14:00:00'), 220], [Date.parse('03/30/2013 15:00:00'), 219.5], [Date.parse('03/30/2013 16:00:00'), 219.5], [Date.parse('03/30/2013 17:00:00'), 219.333333333333], [Date.parse('03/30/2013 18:00:00'), 220], [Date.parse('03/30/2013 19:00:00'), 219.5], [Date.parse('03/30/2013 20:00:00'), 220], [Date.parse('03/30/2013 21:00:00'), 219], [Date.parse('03/30/2013 22:00:00'), 219.5], [Date.parse('03/30/2013 23:00:00'), 
219.666666666667], [Date.parse('03/31/2013 00:00:00'), 219.5], [Date.parse('03/31/2013 01:00:00'), 220], [Date.parse('03/31/2013 02:00:00'), 219], [Date.parse('03/31/2013 04:00:00'), 
219.666666666667], [Date.parse('03/31/2013 05:00:00'), 218.5], [Date.parse('03/31/2013 06:00:00'), 219.666666666667], [Date.parse('03/31/2013 07:00:00'), 219.666666666667], [Date.parse('03/31/2013 08:00:00'), 218], [Date.parse('03/31/2013 09:00:00'), 219.333333333333], [Date.parse('03/31/2013 10:00:00'), 
219.5], [Date.parse('03/31/2013 11:00:00'), 219.666666666667], [Date.parse('03/31/2013 12:00:00'), 219.5], [Date.parse('03/31/2013 13:00:00'), 219.333333333333], [Date.parse('03/31/2013 14:00:00'), 220], [Date.parse('03/31/2013 15:00:00'), 220], [Date.parse('03/31/2013 16:00:00'), 219.333333333333], [Date.parse('03/31/2013 17:00:00'), 220], [Date.parse('03/31/2013 18:00:00'), 219.333333333333], [Date.parse('03/31/2013 19:00:00'), 219], [Date.parse('03/31/2013 20:00:00'), 219.5], [Date.parse('03/31/2013 21:00:00'), 220], [Date.parse('03/31/2013 22:00:00'), 219], [Date.parse('03/31/2013 23:00:00'), 
219.666666666667], [Date.parse('04/01/2013 00:00:00'), 220], [Date.parse('04/01/2013 01:00:00'), 219.666666666667], [Date.parse('04/01/2013 02:00:00'), 220], [Date.parse('04/01/2013 04:00:00'), 220], [Date.parse('04/01/2013 05:00:00'), 220], [Date.parse('04/01/2013 06:00:00'), 219.5], [Date.parse('04/01/2013 07:00:00'), 220], [Date.parse('04/01/2013 08:00:00'), 219], [Date.parse('04/01/2013 09:00:00'), 219.666666666667], [Date.parse('04/01/2013 10:00:00'), 220]], name: 'Gerilim Faz 1 V' }] }); }); </script> 

而且DEMO与上述数据和它的作品。我只删除脚本标记。我认为它关于脚本标签。对此有任何建议。

谢谢...

回答

0

我删除以下行从阿贾克斯

dataType: "json", 

和它的作品,我无法理解为什么呢?如果有人知道原因,可以解释一下吗?

+0

明显地,你的AJAX响应不是'json'类型,它是'text/html' – krzychu