Ответ Json как поиск значения всплывающей подсказки для графика спарклайнов jquery

Я пытаюсь использовать ответ json в качестве параметра tooltipValueLookups в sparklines. график, безуспешно. Всплывающая подсказка продолжает показывать 0:5 и 1:8 вместо Малдера:5 и Скалли:8.

Это отлично работает, если я просто объявлю переменную agents точно таким же json:

var agents = {"names":{"0":"Mulder", "1":"Scully"}}

Но все идет наперекосяк, когда я пытаюсь сделать это с ответом сервера, как и предполагалось. Может ли кто-нибудь сказать мне, пожалуйста, что я делаю неправильно?

var agents = $.ajax({
    url     : "/ajaxAgents",
    type    : "get",
    dataType: 'json'
});

Ответ: {"names":{"0":"Малдер", "1":"Скалли"}}

$("#mini-chart").sparkline([5,8], {
    type: 'bar',
    height: '30px',
    barWidth: 6,
    barSpacing: 2,
    barColor: '#0aa699',
    tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:offset}}: {{value}}',
    tooltipValueLookups:{offset:agents.names},
    negBarColor: '#0aa699'});

Заранее спасибо.

ИЗМЕНИТЬ

После большого количества кофе и ругани, я, наконец, заработал. Не очень элегантное решение, надо признать.

Во-первых, мне пришлось изменить функцию php на стороне сервера, чтобы она возвращала строку, а не json.

Затем в вызове ajax:

var response = $.ajax({
    url     : "/ajaxAgents",
    type    : "get",
    dataType: 'text',
    global  : false,
    async   : false,
    success : function(data){return data;}
}).responseText;

Затем проанализируйте ответ и отфильтруйте его:

var agents = $.parseJSON(response);
var filteredNames = $.map(agents.names, function(el) {
        return el;
    });

И, наконец, функция спарклайнов:

    $("#mini-chart").sparkline(agentsData, {
    type: 'bar',
    height: '30px',
    barWidth: 6,
    barSpacing: 2,
    barColor: '#0aa699',
    tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{offset:offset}}: {{value}}',
    tooltipValueLookups:{offset:filteredNames},
    negBarColor: '#0aa699'});

@Hüseyin: Спасибо за вашу помощь, это было очень полезно.


javascript json jquery sparklines
person Sam    schedule 28.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Фильтр json с помощью $.grep

var filteredNames = $.map(agents.names, function(el, i) {
    return el;
});

И используйте в своей функции, например;

tooltipValueLookups:{offset: filteredNames}

Демонстрацию можно посмотреть здесь: jsfiddle

Примечание. Если вы возвращаете строку с сервера, вам нужно использовать;

var agents = jQuery.parseJSON(response);
person Hüseyin BABAL    schedule 28.03.2014
comment
Извините, это не работает. Я не могу повторно объявить json, это ответ сервера. Кроме того, я почти уверен, что опция tooltipValueLookups должна иметь ключи. Как я уже сказал, функция работает как шарм, если я напрямую объявлю объект JSON. Что-то идет не так, когда я пытаюсь использовать ответ, который в точности соответствует ожидаемому. Спасибо, в любом случае :) - person Sam; 29.03.2014
comment
@ Сэм, хорошо, json может оставаться прежним. Я обновил свой код и демонстрацию, смотрите мой обновленный ответ. - person Hüseyin BABAL; 29.03.2014
comment
Это сводит меня с ума. parseJSON возвращает null, что имеет смысл, поскольку json уже является объектом. И сопоставление agent.names выдает TypeError. Еще раз спасибо за ваш ответ, @Hüseyin. - person Sam; 29.03.2014
comment
Но это уже объект, поэтому не используйте синтаксический анализ json. использовать его напрямую. И посмотрите, работает ли это - person Hüseyin BABAL; 29.03.2014
comment
Я сделал тестовый синтаксический анализ напрямую. Выдавало ошибку TypeError, не мог понять почему. В любом случае, я нашел решение. Я отредактировал вопрос с найденным решением. Спасибо :) - person Sam; 29.03.2014