如何使用C＃將DateTime格式的Google Chart X軸格式化

Question

我正在MVC 5中開發一個網站，並且正在使用Google圖表顯示一些數據圖表。 我正在將折線圖用於具有值和日期的數據。 如下所示：

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軸格式錯誤。 看起來像絕對時間，不是可讀的日期格式。

查看圖表輸出

謝謝你的回答

Answer 1

Google圖表會以幾種方式接受日期 ，

這取決於用來繪制圖表的數據表的加載方式...

1）

如果您使用以下方法之一加載數據表...

addRow() addRows() arrayToDataTable()

日期必須是一個javascript日期對象，
使用new關鍵字創建的
任何有效的構造函數都可以工作

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

2）

如果使用json 直接加載數據表 ...

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

可以使用以下字符串格式 ...

它需要是一個字符串值（用引號引起來）， 而沒有 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由請求url完成：'@ 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

好，我知道了。 閱讀這篇文章可以使一切變得清晰

如何解析JSON以在JavaScript中接收Date對象？

我以以下方式修改了頁面內的Java腳本代碼：

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

現在可以正常使用