Question

我正在使用Azure Cosmos DB中的数据来计算平均值并显示平均速度/小时图。我正在尝试在C＃MVC中使用DateRangeSlider过滤平均速度/小时线Google图表。为了将小时分组为小时，我将字符串转换为DateTime。没有过滤器图表，它可以很好地作为（number）Avg。速度/（字符串）DateTimeHr。但是要添加DateRange滑块，如果我使用“ new Date（）”将String Date转换为DateTime Type，我会减少Hours，因为默认情况下它转换为00Hrs。如果我使用DateTime.ParseExact（）我会收到错误

“未捕获到的SyntaxError：意外号码”。

您能帮忙吗？也欢迎按日期过滤图表的其他任何想法。

如果使用“ new Date（）”将“字符串日期”转换为DateTime类型，则要添加DateRange滑块，因此我松散了“小时”，因为默认情况下已将其转换为00Hrs。如果我使用DateTime.ParseExact()会收到错误

“未捕获到的SyntaxError：意外号码”。

    //      google.load("visualization", "1.1", {packages: ['bar', 'corechart']});
    google.charts.load('current', { packages: ['corechart', 'controls','table'] });

    //google.setOnLoadCallback(drawChart);
    google.charts.setOnLoadCallback(drawDashboard);

    function drawDashboard() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'date');
        data.addColumn('date', 'time');
        data.addColumn('number', 'Speed');
        //data.addColumn('number', 'Average WindSpeed Km/hr', '');
        //DateTime.ParseExact(Html.Encode(group.Key), "dd MMM yyyy HH", CultureInfo.InvariantCulture)
        var rawData = [
 @foreach (var group in vehicleData.GroupBy(i => i.DateTime.ToString("dd MMM yyyy HH")))
                        {
    @:  [@DateTime.ParseExact(@Html.Encode(group.Key), "dd MMM yyyy HH", CultureInfo.CurrentCulture),new Date('@Html.Encode(group.Key)'), @group.Average(d => d.Speed)],
}
        ];
        data.addRows(rawData);
        console.log(rawData);
        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

       // Create a range slider, passing some options
        var dateRangeSlider = new google.visualization.ControlWrapper({
            controlType: 'DateRangeFilter',
            containerId: 'filter_div',
            options: {
                filterColumnLabel: 'time',
            }
        });

        var options = {
            //title: 'Chart By Date',
            chartArea: {
                //left: 20,
                //top: 10,
                width: 1000,
                //height: 500
                animation: { startup: 'true', duration: 1000, easing: 'inAndOut', },
            },
            legend: { position: 'top' },
            hAxis: {
                title: 'Time',
                format: 'dd/MM/yyyy HH',
                showTextEvery: 0,
            slantedText: false,
                slantedTextAngle: '90'
        },
            vAxis: {
                title: 'Average Speed',
                ticks: [0, 25, 50, 75, 100],
            },

             animation: { startup: 'true', duration: 1500, easing: 'inAndOut', },
            colors: ['#e74727']
    };


        var chart = new google.visualization.ChartWrapper({
            chartType: 'LineChart',
            containerId: 'columnchart_div',

        });
       //  setOptions(chart);
        dashboard.bind(dateRangeSlider, chart);


        // Draw the dashboard.
        dashboard.draw(data, options);
}

控制器”

 public async Task<ActionResult> DevicePage(int DeviceId)
        {

            var items = await DocumentDBRepository<Device>.GetDevicemapAsync(d => d.DeviceId == DeviceId);

            var item = await DocumentDBRepository<Item>.GetAvgAsync(d => d.DeviceId == DeviceId, d => d.DateTime);
            item = item.OrderByDescending(d => d.DateTime);
            TempData["Avg"] = item;
            var vehicles= await DocumentDBRepository<Reports>.GetReportsAsync(d => d.DeviceId == DeviceId, d => d.DateTime);
            TempData["Vehicles"] = vehicles;
            var Device = await DocumentDBRepository<Devicemodel>.GetDeviceModelAsync(d => d.Id != null);
            TempData["deviceModel"] = Device;
            return View(items);

        }

预期结果：带有日期的平均速度/小时图范围滑块/过滤器，用户可以在给定日期之间或仅看到给定日期的ghraph。谢谢

C＃MVC中的Google折线图日期范围滑块错误

0 个答案: