Все ряды на данной оси должны иметь один и тот же тип данных-сообщение об ошибке при отображении 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 3

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>