Ошибка несоответствия ASP.NET MVC на диаграмме Google

Я столкнулся с ошибкой javascript с диаграммами Google. У меня есть это для работы с другим запросом, но мне нужно, чтобы результат запроса ниже отображался. Проблема на данный момент в том, что диаграмма не появляется. Любые мысли по отладке этого?

Uncaught (in promise) Error: Type mismatch. Value 1 does not match type string in column index 0

Вот мой контроллер:

  #region Total Hours Per Month
        var querythpmpro = (from r in db.HolidayRequestForms
                            where r.EmployeeID == id
                            group r by r.MonthOfHoliday into g
                            select new { Value = g.Key, Count = g.Sum(h => h.HoursTaken) }
                           ).OrderBy(e => e.Value);


        var resultthpmpro = querythpmpro.ToList();

        var datachartthpmpro = new object[resultthpmpro.Count];
        int Q = 0;
        foreach (var i in resultthpmpro)
        {
            datachartthpmpro[Q] = new object[] { i.Value, i.Count};
            Q++;
        }
        string datathpmpro = JsonConvert.SerializeObject(datachartthpmpro, Formatting.None);
        ViewBag.datajthpmpro = new HtmlString(datathpmpro);

        #endregion

И мой скрипт:

 <script>
var datathpmpro = '@ViewBag.datajthpmpro';
var datassthpmpro = JSON.parse(datathpmpro);
 </script>

  <script type = "text/javascript">

// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChartA);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChartA() {

    // Create the data table.

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Value');
    data.addColumn('number', 'Count');
    data.addRows(datassthpmpro);

    // Set chart options
    var options = {
        'title': 'Holiday Hours Taken Per Month',
        'width': 600,
        'height': 350,
        'hAxis': {title: 'Month Number'},
        'vAxis': {title: 'Holiday Hours Taken'},
        'is3D': true,
        'legend': 'none'
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chartTHPMpro_div'));
    chart.draw(data, options);
}

Я бы хотел, чтобы в результате появилась диаграмма Google, в которой используется приведенный выше запрос.

Похоже, что в столбце скрипта ноль — это значение, а столбец 1 — это количество. Сообщение об ошибке указывает, что в С# вы получаете целое число, а затем пытаетесь преобразовать его в строку.

jdweng 19.03.2019 16:15

Хорошо, я не уверен, где в С# я преобразовываю его в строку, хотя

Conor8630 19.03.2019 16:18

@jdweng Я преобразовал значение в строку, и это сработало!! Спасибо! Если ответишь отмечу как правильный

Conor8630 19.03.2019 16:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема, похоже, исходит из этих строк, которые не соответствуют типам данных i.Value и определенному типу данных столбца в экземпляре google.visualization.DataTable:

// Controller - returns i.Value as int
datachartthpmpro[Q] = new object[] { i.Value, i.Count };

// JS - defined as string column
data.addColumn('string', 'Value');

Предположим, что i.Value содержит целочисленное значение, если вы хотите сохранить addColumn как есть, вы должны передать его как строку с ToString():

datachartthpmpro[Q] = new object[] { i.Value.ToString(), i.Count };

Или, если вы хотите вместо этого использовать целое число без изменения кода действия контроллера, вы можете попробовать number:

data.addColumn('number', 'Value');

Однако, если вы хотите передать столбец Value как целое число с addRow(), сохраняя настройку data.addColumn('string', 'Value'), вы можете попробовать parseInt() при итерации массива:

data.addColumn('string', 'Value');

for (var i = 0; i < datassthpmpro.length; i++) {
    intVal = parseInt($.trim(datassthpmpro[i][0]));
    data.addRow([intVal, datassthpmpro[i][1]]);
}

Использованная литература:

Google Charts — DataTables и DataViews

Справочник по функциям addRow()

Другие вопросы по теме