谷歌的组合图表？ [英] Google Combo Charts?

问题描述

我有4个单位，我向他们展示了4天。但第一天和最后一天我不能看到其他2 entities.In 8月3日我看不到T0，T1。在8月6日我看不到T2，T3。

I have 4 entities and I show them for 4 days. But first and last days I cant see other 2 entities.In 3 August I cant see T0,T1. In 6 August I cant see T2,T3.

codeS

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作为谷歌的例子自定义数据。

This action return json as google examples custom data.

evalledData输出：

evalledData output:

有没有关于这个问题的任何选项？

Is there any option about this problem?

感谢。

推荐答案

最近，我必须建立这样的图表。请考虑我的code为您的解决方案：

I recently had to build a chart like this. Please consider my code for your solution:

将这个：

<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

在您的视图将这个;相应地改变$。员额（）网址：

Put this in your view; changing the $.post() URL accordingly:

<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>

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

To fix your specific issue of the bars being cut off, I believe you can use this in your options:

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'
                          }
                    };

这篇关于谷歌的组合图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！