如何从 C# 以 DateTime 格式格式化谷歌图表 x 轴

Question

我正在 MVC 5 中开发一个网站，我正在使用谷歌图表来显示我的数据的一些图表。我将折线图用于具有值和日期的数据。类似于以下内容：

class ChartData
{
  public double Value { get; set; }
  public DateTime Date { get; set; }
};

在我的控制器中，我有一个请求处理程序来为图表生成数据：

    public JsonResult GenerateChartData(int id)
    {
        List<ChartData> list = new List<ChartData>();
        // some code to populate the list
        return Json(list, JsonRequestBehavior.AllowGet);
    }

一切正常，除了应该显示日期时间序列的 X 轴格式错误。看起来绝对时间不是可读的日期格式。

see the chart output

感谢您的任何回答

Answer 1

谷歌图表将accept dates in a couple ways，

这取决于如何加载用于绘制图表的数据表...

1)

如果您使用以下方法之一加载数据表...

addRow(), addRows(), arrayToDataTable()

日期需要是 javascript 日期对象，
使用 new 关键字创建，
任何valid constructor will work

new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);

2)

如果使用json转load the data table directly...

var data = new google.visualization.DataTable(jsonData);

下面的string format可以用...

它需要是一个字符串值（用引号括起来），没有 new 关键字...

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

Month 从零开始

"Date(2017, 4, 16)" // <-- 5/16/2017

Answer 2

这是在 java 脚本中加载数据的方法。但在我的情况下，数据是通过对控制器的请求以 json 格式生成的。我发布了我的页面代码

@model BDF.RemoteData.Data.TagData
@{
ViewBag.Title = "Chart";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>[[[Grafico]]]</h2>

<input type="hidden" id="idInput" data-value="@ViewBag.id" />
<input type="hidden" id="idSystem" data-value="@ViewBag.system" />
<input type="hidden" id="idStart" data-value="@ViewBag.start" />
<input type="hidden" id="idEnd" data-value="@ViewBag.end" />

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("visualization", "1",
{
    packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

function drawChart()
{
var id = $("#idInput").data("value");
var system = $("#idSystem").data("value");
var start = $("#idStart").data("value");
var end = $("#idEnd").data("value");

$.ajax(
{
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    url: '@Url.Action("GenerateChartData")',
    data:
        {
            id: id,
            system: system,
            start: start,
            end: end
        },
        type: "GET",
        error: function (xhr, status, error)
        {
            var err = eval("(" + xhr.responseText + ")");
            toastr.error(err.message);
        },
        beforeSend: function ()
        {
        },
        success: function (data)
        {
            HistDashboardChart(data);
            return false;
        },
        error: function (xhr, status, error)
        {
            var err = eval("(" + xhr.responseText + ")");
            toastr.error(err.message);
        },
        complete: function ()
        {
        }
    });
    return false;
}
//This function is used to bind the user data to chart
function HistDashboardChart(data)
{
    $("#Data_Chart").show();
    var dataArray = [
    ['Date', 'Value']
    ];
    $.each(data, function (i, item)
    {
        dataArray.push([item.Date, item.Value]);
    });
    var data = google.visualization.arrayToDataTable(dataArray);
    var options = {
        legend:
        {
            position: 'bottom',
            textStyle:
            {
                color: '#f5f5f5'
            }
        },
        colors: ['#34A853', 'ff6600', '#FBBC05'],
        backgroundColor: '#454545',
        hAxis:
        {
            title: 'Time',
            titleTextStyle:
            {
                italic: false,
                color: '#00BBF1',
                fontSize: '20'
            },
            textStyle:
            {
                color: '#f5f5f5'
            }
        },
        vAxis:
        {
            baselineColor: '#f5f5f5',
            title: 'Values',
            titleTextStyle:
            {
                color: '#00BBF1',
                italic: false,
                fontSize: '20'
            },
            textStyle:
            {
                color: '#f5f5f5'
            },
            viewWindow:
            {
                min: 0,
                format: 'long'
            }
        },
        curveType: 'function',
    };
    var chart = new     google.visualization.LineChart(document.getElementById('Data_Chart'));
    chart.draw(data, options);
    return false;
};
</script>  

<div id="Data_Chart" style="width: 100%; height: 500px"> </div>

如您所见，请求 url 完成的作业 id：'@Url.Action("GenerateChartData")' 然后返回的数据被代码推入一个数组中

    var dataArray = [
    ['Date', 'Value']
    ];
    $.each(data, function (i, item)
    {
        dataArray.push([item.Date, item.Value]);
    });

在这种情况下，我假设 item.Date 已经是日期时间格式，但也许我必须以特殊方式对其进行格式化。

Answer 3

console.log(item.Date) 的输出如下：

/Date(1494937128000)/
/Date(1494937133000)/
/Date(1494937138000)/
/Date(1494937143000)/
/Date(1494937148000)/
/Date(1494937153000)/
/Date(1494937158000)/
/Date(1494937163000)/

我觉得这看起来很奇怪，不是吗？

Answer 4

好的，我明白了。看完这篇文章就明白了

How to parse JSON to receive a Date object in JavaScript?

我通过以下方式修改了页面内的 java 脚本代码：

    var dataArray = [
    ['Date', 'Value']
    ];
    $.each(jsondata, function (i, item) {
        var d = new Date(parseInt(item.Instant.substr(6)));
        dataArray.push([d, item.Value]);
    });

现在完美运行