在Razor中设置Google图表的viewWindow最小最大小时数

时间:2017-07-06 13:57:58

标签: razor charts google-visualization

我有一个Google图表,其中包含hAxis的以下选项。但我无法让viewWindow工作

这个剃刀代码:

    hAxis: {
            format: 'HH:mm',
            showTextEvery: 2,
            gridlines: {
                count: -1,
                units: {hours: {format:['HH:mm']}}
            },
            viewWindow: {
                min: new Date(@Model.SelectedDate.Year, @Model.SelectedDate.Month-1, @Model.SelectedDate.Day, 0),
                max: new Date(@Model.SelectedDate.Year, @Model.SelectedDate.Month-1, @Model.SelectedDate.Day, 23, 59)
            }
        },

生成以下html

    hAxis:{
            format: 'HH:mm',
            showTextEvery: 2,
    viewWindow: {
                min: new Date(2017, 7-1, 6, 0),
                max: new Date(2017, 7-1, 6, 23, 59)
            },
            gridlines: {
                count: -1,
                units: {hours: {format:['HH:mm']}}
            },

        },

此代码给出错误:getTime不是函数

如何更改剃刀代码,以便在图表的javascript部分中显示我的日期。

当我删除viewWindow部分的行时,我的图表正在运行。所以我认为我的数据不是问题所在。

我的一些数据

    data.addColumn('datetime', 'Tijdstip');
    data.addColumn('number', 'gemeten temperatuur');
        data.addRows([
                [new Date(2017, 2-1, 22, 0, 0, 34), -16.56200000],
                [new Date(2017, 2-1, 22, 0, 1, 38), -16.44000000],
                [new Date(2017, 2-1, 22, 0, 2, 39), -16.27600000],
                [new Date(2017, 2-1, 22, 0, 3, 44), -15.78500000],
                [new Date(2017, 2-1, 22, 0, 4, 47), -15.74400000],
                [new Date(2017, 2-1, 22, 0, 5, 52), -15.41700000],
                [new Date(2017, 2-1, 22, 0, 6, 52), -15.17100000],
                [new Date(2017, 2-1, 22, 0, 7, 57), -14.88500000],
                [new Date(2017, 2-1, 22, 0, 8, 58), -14.35300000],
tia Ronald

1 个答案:

答案 0 :(得分:0)

viewWindow使用的值有效,不相信这是问题

使用已发布的选项...

查看以下工作代码段

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [new Date(2017, 6, 6, 1), 1000],
    [new Date(2017, 6, 6, 2), 2000],
    [new Date(2017, 6, 6, 3), 3000],
    [new Date(2017, 6, 6, 4), 4000],
    [new Date(2017, 6, 6, 5), 5000],
    [new Date(2017, 6, 6, 6), 6000]
  ]);


  var options = {
    hAxis:{
      format: 'HH:mm',
      showTextEvery: 2,
      viewWindow: {
        min: new Date(2017, 7-1, 6, 0),
        max: new Date(2017, 7-1, 6, 23, 59)
      },
      gridlines: {
        count: -1,
        units: {hours: {format:['HH:mm']}}
      },
    },
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>