DotnetHighcharts ajax加载数据?

时间:2013-04-01 09:14:38

标签: asp.net-mvc highcharts dotnethighcharts

custom_scripts_graph.js(ajax post)

$.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

错误:

  

意外的令牌&lt;

所有数据均为真。 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包含上述数据并且有效。我只删除了脚本标签。我认为它是关于脚本标签。对此有任何建议。

...谢谢

1 个答案:

答案 0 :(得分:0)

我从ajax中删除了以下行

dataType: "json",

它有效,我不明白为什么?如果有人知道原因,可以解释一下吗?