asp.net-mvc - 谷歌组合图表？

Question

我有 4 个实体，我展示了 4 天。但第一天和最后一天我看不到其他 2 个实体。8 月 3 日我看不到 T0、T1。8 月 6 日，我看不到 T2、T3。

代码

var evalledData = eval("(" + result.chartData + ")");
var ac = new google.visualization.ComboChart($("#chart_div_ay").get(0));

ac.draw(new google.visualization.DataTable(evalledData, 0.5), {
     //title: 'Son 7 günlük sayaç okumalarının toplamı.',
     width: '100%',
     height: 300,
     vAxis: { title: "kW" },
     hAxis: { title: "Gün" },
     seriesType: "bars",
     series: { 5: { type: "line"} }
});

控制器：

public ActionResult MusteriSayaclariOkumalariChartDataTable(DateTime startDate, DateTime endDate, int? musteri_id)
    {
        IEnumerable<TblSayacOkumalari> sayac_okumalari = entity.TblSayacOkumalari;
        var sonuc = from s in sayac_okumalari
                    where s.TblSayaclar.musteri_id == musteri_id && s.okuma_tarihi.Value >= startDate && s.okuma_tarihi.Value <= endDate
                    group s by new { date = new DateTime(((DateTime)s.okuma_tarihi).Year, ((DateTime)s.okuma_tarihi).Month, ((DateTime)s.okuma_tarihi).Day) } into g
                    select new
                    {
                        okuma_tarihi = g.Key,
                        T1 = g.Sum(x => x.kullanim_T1) / 1000,
                        T2 = g.Sum(x => x.kullanim_T2) / 1000,
                        T3 = g.Sum(x => x.kullanim_T3) / 1000,
                        T4 = g.Sum(x => x.kullanim_T0) / 1000
                    };

        //Get your data table from DB or other source
        DataTable chartTable = new DataTable();

        chartTable.Columns.Add("Tarih").DataType = System.Type.GetType("System.DateTime");
        chartTable.Columns.Add("T1").DataType = System.Type.GetType("System.Double");
        chartTable.Columns.Add("T2").DataType = System.Type.GetType("System.Double");
        chartTable.Columns.Add("T3").DataType = System.Type.GetType("System.Double");
        chartTable.Columns.Add("Toplam").DataType = System.Type.GetType("System.Double");
        foreach (var item in sonuc)
        {
            chartTable.Rows.Add(item.okuma_tarihi.date, item.T1.Value, item.T2.Value, item.T3.Value, item.T4.Value);
        }

        //convert datetime value to google datetype, if your first column is date
        Bortosky
            .Google
            .Visualization
            .GoogleDataTable
            .SetGoogleDateType(chartTable.Columns["Tarih"],
                 Bortosky.Google.Visualization.GoogleDateType.Date);
        //convert DataTable to GoogleDataTable
        var googleDataTable =
                    new Bortosky.Google.Visualization.GoogleDataTable(chartTable);
        //Pass the google datatable to UI as json string

        return new JsonResult
        {
            Data = new
            {
                success = true,
                chartData = googleDataTable.GetJson()
            },
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };
    }

此操作将 json 作为 google 示例自定义数据返回。

evalledData 输出：

这个问题有什么选择吗？

谢谢。

Answer 1

我最近不得不建立一个这样的图表。请考虑我的代码作为您的解决方案：

把它放在你的控制器中：

<EmployeeAuthorize()>
Function WeightAreaChartData() As JsonResult

    Dim myData = db.Tbl_Weights.Where(Function(x) x.Weight_Employee_ID).OrderBy(Function(x) x.Weight_Create_Date)

    Dim data = New List(Of Object)

    data.Add(New Object() {"Date", "Your Weight"})

    For Each i As Tbl_Weight In myData

        data.Add(New Object() {DateTime.Parse(i.Weight_Create_Date).Day, i.Weight_Amount})

    Next

    Return Json(data, JsonRequestBehavior.AllowGet)

End Function

把它放在你的视野中；相应地更改 $.post() URL：

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

    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {},
            function (data) {
                var tdata = new google.visualization.arrayToDataTable(data);

                var options = {
                    title: 'Weight Lost & Gained This Month',
                    hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                    vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08'} },
                    chartArea: { left: 50, top: 30, width: "75%" },
                    colors: ['#FF8100']
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                chart.draw(tdata, options);
            });
    }
</script>

<div id="chart_div" style="width: 580px; height: 200px;"></div>

为了解决你的酒吧被切断的具体问题，我相信你可以在你的选择中使用它：

hAxis: {
  viewWindowMode: 'pretty'
}

像这样：

var options = {
                        title: 'Weight Lost & Gained This Month',
                        hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                        vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
                        chartArea: { left: 50, top: 30, width: "75%" },
                        colors: ['#FF8100', 'blue'],
                       hAxis: {

                            viewWindowMode: 'pretty'
                          }
                    };