Все ряды на данной оси должны иметь один и тот же тип данных-сообщение об ошибке при отображении datatime на диаграмме
Я пытаюсь отобразить данные из моей базы данных в приложении MVC с помощью Google charts. Когда я показываю формат "int", он работает нормально, но когда я хочу изменить, например, тип" datetime", я получаю сообщение об ошибке:"все серии на данной оси должны иметь один и тот же тип данных". Вот мой пример базы данных: база данных
Код контроллера:
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 работает очень красиво, но когда я меняю отображение "данных", это не работает, кто-нибудь может мне в этом помочь?
1 ответ:
Во-первых , поскольку вы тотально новичок...
Рекомендуется использовать
loader.js
для загрузки библиотеки диаграмм, в отличие отjsapi
<script src="https://www.gstatic.com/charts/loader.js"></script>
Согласно примечаниям к выпуску ...
Версия Google Charts, которая остается доступной через загрузчик
jsapi
, больше не обновляется последовательно. Пожалуйста, теперь используйте новый загрузчикgstatic
.Это только изменит оператор
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>
EDIT
Интегрируясь в код из вопроса,
Вы можете положиться на google
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>