Question

我正在尝试在sparklines图表中使用json响应作为 tooltipValueLookups 参数，但没有成功。工具提示只是显示0：5和1：8而不是Mulder：5和Scully：8

如果我只使用完全相同的json声明变量 agent ，它的效果非常好：

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

但是当我尝试按照预期的服务器响应进行操作时，evrything向南走了。请问有人告诉我，我做错了什么？

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

回应：{“姓名”：{“0”：“Mulder”，“1”：“Scully”}}

$("#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：感谢您的帮助，这非常有帮助。

Answer 1

使用$.grep

过滤json

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

并在您的函数中使用;

tooltipValueLookups:{offset: filteredNames}

您可以在此处查看演示： jsfiddle

注意：如果要从服务器返回字符串，则需要使用;

var agents = jQuery.parseJSON(response);

Json响应作为jquery sparklines图的工具提示值查找

1 个答案: