javascript - 给定轴上的所有系列必须具有相同的数据类型 - 在图表上显示数据时间时出现错误消息

Question

我正在尝试使用谷歌图表在 MVC 应用程序中显示我的数据库中的数据。当我显示“int”格式时它工作正常，但是当我想更改为例如“datetime”类型时，我收到错误消息:“给定轴上的所有系列必须具有相同的数据类型”。这是我的示例数据库: Database

Controller 代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace GoogleProba.Controllers
{
public class GoogleChartController : Controller
{
    // GET: GoogleChart
    public ActionResult Column()
    {
        return View();
    }
    public JsonResult GetSalesData()
    {
        List<SalesData> sd = new List<SalesData>();
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
        {
            sd = dc.SalesData.OrderBy(a => a.Data).ToList();
        }

        var chartData = new object[sd.Count + 1];
        chartData[0] = new object[]{
                "Data",
                "Electronics",
                "Book And Media",
                "Home And Kitchen"
            };
        int j = 0;
        foreach (var i in sd)
        {
            j++;
            chartData[j] = new object[] { i.Data, i.Electronics, i.BookAndMedia, i.HomeAndKitch };
        }

        return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}
}

查看代码(更新):

@{
ViewBag.Title = "Column";
 }



 <div id="visualization" style="width:600px; height:300px">

 </div>
 <script src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript"    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 @section Scripts{
 <script>
  google.charts.load('current', {
  callback: function () {
    //Load Data Here
    var chartData = null;
    $.ajax({
        url: '/GoogleChart/GetSalesData',
        type: 'GET',
        dataType: 'json',
        data: ''
    }).done(function (d) {
        drawChart(d);
        console.log(JSON.stringify(d))
    }).fail(function (jq, text, errMsg) {
        console.log(errMsg);
    });
  },
  packages:['corechart']
  });

 function drawChart(d) {
// process date column
d.forEach(function (row, index) {
  if (index === 0) {
    return;
  }
  row[0] = row[0].replace('/', 'new ');
  row[0] = row[0].replace('/', '');
  row[0] = eval(row[0]);

});

data = google.visualization.arrayToDataTable(d);

var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'datetime',
    label: data.getColumnLabel(0),
    calc: function () { return 0; }
}, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () { return 0; }
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function () { return 0; }
}, {
    type: 'number',
    label: data.getColumnLabel(3),
    calc: function () { return 0; }
}]);

var chart = new google.visualization.LineChart(document.getElementById('visualization'));
var options = {
    title: 'Sales Report',
    legend: 'bottom',
    hAxis: {
        title: 'year',
        format: '#'
    },
    vAxis: {
        minValue: 0,
        maxValue: 1000000,
        title: 'Sales Amount'
    },
    chartArea: {
        left:100, top: 50, width:'70%', height: '50%'
    },
    animation: {
        duration: 1000
    }
};

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    chart.draw(data, options);
});

chart.draw(view, options);
 }
</script>

 }

我的日志数据:[["Data","Electronics","Book And Media","Home And Kitchen"],["2016-01-31T23:00:00.000Z",345000 ,76666,66777],["2016-03-05T23:00:00.000Z",567000,94000,234000],["2016-05-06T22:00:00.000Z",234555,55555,678900],["2016-06-02T22:00:00.000Z",455555,555555,567000]]

当我将数据库中的“年”放在 X 轴上时，它工作得非常好，但是当我更改为显示“数据”时，它不起作用，有人可以帮助我吗？

Answer 1

首先，因为你完全是新手...

推荐使用loader.js加载图表库，对比 jsapi

<script src="https://www.gstatic.com/charts/loader.js"></script>

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

这只会改变 load声明，请参阅下面的代码片段了解详情...

---

下一步，为了便于在 google 上使用，json 日期需要以某种方式格式化...

"Date(year, month, day, hours, minutes, days, seconds, milliseconds)"

例如--> "Date(2016, 11, 21)" -- 或 -- "Date(2016, 11, 21, 20, 48, 18, 122)" -- 等等……

---

然而，我对 c# 帮不上什么忙

因此，以下脚本将使用 javascript 转换客户端上的日期

(不推荐用于大数据集)

---

javascript 可以使用整数来获取正确的日期，只是需要采用不同的格式

-- 将数组中的第一列转换为实际日期

来自:"/Date(1454281200000)/"

至:new Date(1454281200000)

// replace first forward slash (/) with 'new'
row[0] = row[0].replace('/', 'new ');

// remove second forward slash (/)
row[0] = row[0].replace('/', '');

// evaluate the string to an actual date
row[0] = eval(row[0]);

---

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var rawData = [
      ["Data","Electronics","Book And Media","Home And Kitchen"],
      ["/Date(1454281200000)/",345000,76666,66777],
      ["/Date(1457218800000)/",567000,94000,234000],
      ["/Date(1462572000000)/",234555,55555,678900],
      ["/Date(1464904800000)/",455555,555555,567000]
    ];

    rawData.forEach(function (row, index) {
      // skip column labels
      if (index === 0) {
        return;
      }
      row[0] = row[0].replace('/', 'new ');
      row[0] = row[0].replace('/', '');
      row[0] = eval(row[0]);
    });

    var data = google.visualization.arrayToDataTable(rawData);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
      hAxis: {
        format: 'MMM yyyy'
      }
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

从问题中整合到代码中，

你可以依靠谷歌callback知道页面何时准备好
而不是 --> $(document).ready

还有一些其他的小变化，包括 addOneTimeListener

<script>
  google.charts.load('current', {
      callback: function () {
        //Load Data Here
        var chartData = null;
        $.ajax({
            url: '/GoogleChart/GetSalesData',
            type: 'GET',
            dataType: 'json',
            data: ''
        }).done(function (d) {
            drawChart(d);
        }).fail(function (jq, text, errMsg) {
            console.log(errMsg);
        });
      },
      packages:['corechart']
  });

  function drawChart(d) {
    // process date column
    d.forEach(function (row, index) {
      if (index === 0) {
        return;
      }
      row[0] = row[0].replace('/', 'new ');
      row[0] = row[0].replace('/', '');
      row[0] = eval(row[0]);
    });

    data = google.visualization.arrayToDataTable(d);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'datetime',
        label: data.getColumnLabel(0),
        calc: function () { return 0; }
    }, {
        type: 'number',
        label: data.getColumnLabel(1),
        calc: function () { return 0; }
    }, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function () { return 0; }
    }, {
        type: 'number',
        label: data.getColumnLabel(3),
        calc: function () { return 0; }
    }]);

    var chart = new google.visualization.LineChart(document.getElementById('visualization'));
    var options = {
        title: 'Sales Report',
        legend: 'bottom',
        hAxis: {
            title: 'year',
            format: '#'
        },
        vAxis: {
            minValue: 0,
            maxValue: 1000000,
            title: 'Sales Amount'
        },
        chartArea: {
            left:100, top: 50, width:'70%', height: '50%'
        },
        animation: {
            duration: 1000
        }
    };

    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        chart.draw(data, options);
    });

    chart.draw(view, options);
  }
</script>