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

google图表将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>

正如您可以看到请求网址完成的工作ID：＆＃39; @ Url.Action（＆＃34; GenerateChartData＆＃34;）＆＃39; 然后将返回的数据推送到代码

的数组中

    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]);
    });

现在它完美无缺

如何使用C＃格式化DateTime格式的Google图表x轴

4 个答案: