Заполнение набора данных HighCharts в Javascript из объекта ViewData .Net Core

Я пытаюсь использовать HighCharts в .Net и испытываю трудности с заполнением набора данных, который HighChart использует на диаграмме. Первоначально я делал это в представлении, используя следующее:

new BubbleSeries
{
     Data = (ViewData["bubble1"] as List<BubbleSeriesData>)
},

Это работает, но мне приходится выполнять остальную часть форматирования HighCharts в представлении Razor. HighCharts не имеет большого количества подробных примеров форматирования различных объектов диаграммы в .Net, больше полагаясь на использование javascript.
Я подумал, что попробую другой такт и построю диаграмму в теге скрипта в представлении. Проблема, с которой я сталкиваюсь, заключается в том, как назначить «ViewData» объекту данных.

Как я могу заменить это:

series: [{
            data: [
                { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
                { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
                { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
                { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
                { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
                { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
                { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
                { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
                { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
                { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
                { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
                { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
                { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
                { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
                { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
            ]
        }]

с этим:

series: [{
            data: [
               (ViewData["bubble1"] as List<BubbleSeriesData>)
            ]
        }]

asp.net-core highcharts .net-core-3.1

09.05.2022 22:26

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вот рабочий образец:

модель:

public class BubbleSeriesData {
        public int x { get; set; }
        public int y { get; set; }
        public int z { get; set; }
        public string name { get; set; }
        public string country { get; set; }

    }

Данные просмотра:

List<BubbleSeriesData> ll = new List<BubbleSeriesData> { new BubbleSeriesData { x = 1, y = 1, z = 1, name = "n1", country = "c1" }, new BubbleSeriesData { x = 2, y = 2, z = 2, name = "n2", country = "c2" } };
    ViewData["bubble1"] = JsonConvert.SerializeObject(ll);

ряд:

series: [{
                data:@Html.Raw(JsonConvert.DeserializeObject(ViewData["bubble1"].ToString()))
            }],

Спасибо за помощь. Была одна вещь, которая заставила меня зациклиться на вашем решении. Я получаю предупреждение "(JS) Expression Expected" в закрывающей фигурной скобке для Series. Я пытался это очистить, но ничего не вышло. Затем я попробовал это точно так же, как у вас, и проигнорировал предупреждение. Конечно, это сработало. Я не знаю, почему я получаю это предупреждение, но, по крайней мере, график работает. Спасибо!

— 10.05.2022 14:47

10.05.2022 04:49