shafraz buksh Ответов: 3

Объект JSON для highchart

Привет
Я новичок в JSON, поэтому хотел спросить вас, как передать возвращенные данные JSON и поместить их непосредственно в Highcharts. Это мои данные:
JSON = [{"name":"Book","data":[14,17,9,10,6,19,6,8,0,4]},{"name":"Book Chapter","data":[65,74,44,66,9,23,36,51,53,36]},
{"name":"Conference Proceedings","data":[15,17,27,30,28,54,35,43,50,35]},{"name":"Journal Article","data":[178,162,133,139,133,191,160,194,149,169]}]


Если я поставлю это прямо, как эта серия: JSON, это не сработает, но если я укажу вручную, то это произойдет. Я не знаю почему. Пожалуйста помочь.

С уважением
Букш

Что я уже пробовал:

Попробовали использовать нижеприведенное,
$('#chartTrendsPublicationRankDetailed').highcharts({
           chart: {
               type: 'line'
           },
           title: {
               text: 'My data'
           },
           xAxis: {
               categories: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016']
           },
           series: [{ "name": "Book", "data": [14, 17, 9, 10, 6, 19, 6, 8, 0, 4] }, { "name": "Book Chapter", "data": [65, 74, 44, 66, 9, 23, 36, 51, 53, 36] }, { "name": "Conference Proceedings", "data": [15, 17, 27, 30, 28, 54, 35, 43, 50, 35] }, { "name": "Journal Article", "data": [178, 162, 133, 139, 133, 191, 160, 194, 149, 169] }]

       });


Это работает, но мне нужно передать переменную и указать ее вручную.

3 Ответов

Рейтинг:
1

Bryian Tan

Ладно, я просто предполагаю, основываясь на том, что было представлено. Ваше приложение имеет графики highcharts и данные серии (формат JSON), возвращаемые API? Далее я предположил, что возвращаемые данные хранятся в переменной под названием JSON? Возможно, вам придется переименовать его, если это так, это немного сбивает с толку. Когда вы подключаете переменную к ряду, диаграммы ничего не показывают (пустые)? Но если вы вставите данные напрямую, это сработает?

Я предполагаю, что данные возвращались в виде строки? Если это так, то вам нужно добавить строку в код для синтаксического анализа строки в JSON с помощью метода JSON.parse (). Вот вам пример. Кроме того, убедитесь, что в данных нет разрыва строки, все должно быть в одной длинной строке.

Highcharts Demo - JSON String[^]

[no name]

согласен +5

shafraz buksh

Спасибо за ваш ответ, Гаурав. Мой ответ ниже:
Когда вы подключаете переменную к ряду, диаграммы ничего не показывают (пустые)? Но если вы вставите данные напрямую, это сработает?Да, вставка данных сработала.
Я предполагаю, что данные возвращались в виде строки? Извините, что поделился кодом ниже. Возвращаемые данные представляют собой массив. Как я могу продолжать это делать?

//Контроллер
public JsonResult _GetChart_TrendPublicationTypeDetailed_data(int yearToDisplay)
{
//Виды публикаций, подлежащих рассмотрению
строка[] publication_types = новая строка[] { "статьи", "книги", "book_section", "conference_proceedings" };

//Получить список выходных данных с авторами usp
ВАР uspPubs = _uspAuthoredPublications();

//Список лет, за которые будут отображаться данные
List<int> yearRange = _getListOfYears(yearToDisplay, yearRangeFactor_10);

//Получить данные
данных VAR = от eprint_summary в localdb.Резюме
где
eprint_summary.Year > (yearToDisplay - yearRangeFactor_10)
&ампер;&ампер; eprint_summary.Year <= yearToDisplay
усилитель&;&амп; publication_types.Содержит(eprint_summary.TypeCode)
усилитель&;&амп; uspPubs.Содержит(eprint_summary.EprintId)
//&амп;&амп; eprint_summary.рецензируемых == "правда" //задач: подтвердить, действительно ли нам нужен этот фильтр в нашем пунктам
сгруппируйте eprint_summary по новому { eprint_summary.Год, eprint_summary.TypeDesc } в typeTrend
orderby typeTrend.Key.Year, typeTrend.Key.TypeDesc
выберите новый
{
Год = typeTrend.Ключ.Год,
Тип = typeTrend.Ключ.TypeDesc,
Кол-во = typeTrend.Рассчитывать()
};

//Извлечение данных серии
List<object> countData = новый список<object>();
по каждому элементу (ВАР элемент в данных.Вызова метода toList().Выберите(г =&ГТ; г.Тип).Distinct().OrderBy(y => y))
{
List<int> yearlyData = новый список<int>();
foreach (var year in yearRange)
{
var rec = данные
.Где(г =&ГТ; г.Тип == пункт)
.Где(г =&ГТ; г.Год == год)
.Выберите(г =&ГТ; г.В счет).Метод toArray();
yearlyData.Добавить(
отдых == нуль || зап.Длина == 0 ? 0 : rec[0]
);
}

countData.Добавить(
новый
{
name = item, //название серии
data = yearlyData.ToArray() //массив данных
}
);
}

//Сформируйте объект json, используя данные серии и метки
вернуть в формате JSON(
новый
{
метки = yearRange.Метод toArray(),
series = countData
},
JsonRequestBehavior.AllowGet
);
}

/Индекс/.cshtml по

var seriesData = ' ';

функция ajaxCall() {
$.Аякс({
тип: "почта",
тип данных: "Json",
асинхронные: правда,
URL-адрес: '@URL-адрес.Действий("_GetChart_TrendPublicationTypeDetailed_data", "ResearchCharts")',
данные: { yearToDisplay: '@(DateTime.Now.AddYears(-1).Year.Метод toString())' },
успех: функция (данные) {
seriesData = data.series;
//оповещения(в формате JSON.преобразовать в строки(seriesData));
bindChart(seriesData);
//seriesData = data.series;
//оповещения(в формате JSON.преобразовать в строки(Да

[no name]

Привет @shafraz buksh
Возможно, это проблема с котировками в параметрах JSON.
https://github.com/highcharts/highcharts/issues/5107

shafraz buksh

Привет @Gaurav1641

Мне удалось получить исправление, не делая никакого ненужного кодирования. Смотрите ниже мое решение. Спасибо за вашу помощь.

Рейтинг:
1

Member 13969195

это не очень хорошо для передачи таких данных

Рейтинг:
0

shafraz buksh

Предыдущий код рендеринга highcharts:

$('#chartTrendsPublicationRankDetailed').highcharts({
           chart: {
               type: 'line'
           },
           title: {
               text: 'My data'
           },
           xAxis: {
               categories: labels
           },
           series: seriesData

       });


Новый код рендеринга Highcharts. Это позволяет успешно принимать мои объекты JSON и визуализировать графики.
function bindChartItemType(seriesData, labels) {

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chartTrendsPublicationTypeDetailed',
                type: 'line',
                height: 500,
                width: 500
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Trend of Publications by Item Type'
            },
            xAxis: {
                categories: labels,
                title: {
                    text: 'Year'
                }
            },
            yAxis: {
                min:0,
                title: {
                    text: '# of publications'
                }
            },
            series: seriesData
        });
    }


Не стесняйтесь добавлять в комментарии все, что вам нравится.

С уважением
Шафраз Букш