为堆积线图创建自定义x轴标签

时间：2014-10-28 19:22:51

标签： jqplot

这是我的折线图目前的样子：

enter image description here

我想摆脱底部的数字，并用自定义的东西替换它们，间隔时间更短。我该怎么做？我已经查看了jqplot示例和文档，并且Haven能够找到我正在寻找的内容。我目前的代码：

数据： 

"intervalProgressChart": {
    "new": [11,6,13,7,6,6,6,14,13,8,15,14,10,14,8,13,6,8,15,14,8,8,12,13,12,10,9,7,14,8,14,12,12,13,8,7,6,10,7,9,8,14,10,13,12,13,14,9,13,10,9,10,11,13,10,12,11,12,11,13,7,6,6,14,12,7,14,12,6,8,9,7,8,15,7,10,14,6,7,7,15,15,9,15,6,10,11,6,8,9,10,8,14,14,5,10,10],
    "pending_packaging": [4,3,4,3,1,3,4,5,3,2,5,1,3,5,4,4,2,4,5,2,4,2,3,4,2,2,4,1,3,4,2,5,1,4,2,3,1,2,4,4,2,5,5,3,5,2,5,1,4,4,1,4,4,2,2,3,4,4,5,1,2,3,3,3,2,4,1,1,4,4,2,3,2,5,3,3,2,3,2,2,1,4,5,3,3,4,2,1,2,2,3,1,5,4,5,5,5],
    "pending_delivery": [8,7,6,7,8,5,8,7,5,7,6,7,8,8,9,4,9,6,7,6,7,4,3,4,6,6,5,8,5,7,7,4,4,3,7,4,5,6,5,6,6,7,5,4,4,4,7,5,4,8,7,9,5,8,4,7,5,4,8,3,7,3,3,4,8,6,5,6,8,5,5,6,9,7,3,8,6,6,6,5,5,5,4,4,8,5,7,6,9,6,7,5,4,5,3,4,7]
}

代码： 

$("#intervalProgressChart")
.width(Math.max(600, $(window).width()-100))
.css("clear","both");
$.jqplot("intervalProgressChart", [ data["new"], 
                                    data.pending_packaging, 
                                    data.pending_delivery ] {
    title: "Artifacts in Process for the last 48 hours, last updated " + lastUpdated,
    series: [
             {label: "New"},
             {label: "Pending Packaging"},
             {label: "Pending Delivery"}/*,
             {label: "Delivered"},
             {label: "Error"},
             {label: "Aborted"},
             {label: "Express"}*/
    ],
    seriesColors: [ "#77a22d", "#0099c4", "#621f95" ],
    stackSeries : true,
    showMarker : false,
    highlighter : {
        show : true,
        showTooltip : false
    },
    axes: {
        xaxis: {
            pad: 0
        }
    },
    seriesDefaults : {
        fill : true,
    },
    legend : {
        show : true,
        placement : 'outsideGrid'
    },
    grid : {
        drawBorder : false,
        shadow : false
    }
});

我尝试根据我看到here的内容将标签放到其中一个数据集上......就像这样：

数据：

"intervalProgressChart": {
    "new": [["48 hours ago", 11],["", 6],["", 13],["", 7],["", 6],["", 6],["", 6],["", 14],["", 13],["", 8],["", 15],["", 14],["", 10],["", 14],["", 8],["", 13],["", 6],["", 8],["", 15],["", 14],["", 8],["", 8],["", 12],["", 13],["", 12],["", 10],["", 9],["", 7],["", 14],["", 8],["", 14],["", 12],["", 12],["", 13],["", 8],["", 7],["", 6],["", 10],["", 7],["about 24 hours ago",9],["", 8],["", 14],["", 10],["", 13],["", 12],["", 13],["", 14],["", 9],["", 13],["", 10],["", 9],["", 10],["", 11],["", 13],["", 10],["", 12],["", 11],["", 12],["", 11],["", 13],["", 7],["", 6],["", 6],["", 14],["", 12],["", 7],["", 14],["", 12],["", 6],["", 8],["", 9],["", 7],["", 8],["", 15],["", 7],["", 10],["", 14],["", 6],["", 7],["", 7],["", 15],["", 15],["", 9],["", 15],["", 6],["", 10],["", 11],["", 6],["", 8],["", 9],["", 10],["", 8],["", 14],["", 14],["", 5],["", 10],["Current time", 10]],
    "pending_packaging": [4,3,4,3,1,3,4,5,3,2,5,1,3,5,4,4,2,4,5,2,4,2,3,4,2,2,4,1,3,4,2,5,1,4,2,3,1,2,4,4,2,5,5,3,5,2,5,1,4,4,1,4,4,2,2,3,4,4,5,1,2,3,3,3,2,4,1,1,4,4,2,3,2,5,3,3,2,3,2,2,1,4,5,3,3,4,2,1,2,2,3,1,5,4,5,5,5],
    "pending_delivery": [8,7,6,7,8,5,8,7,5,7,6,7,8,8,9,4,9,6,7,6,7,4,3,4,6,6,5,8,5,7,7,4,4,3,7,4,5,6,5,6,6,7,5,4,4,4,7,5,4,8,7,9,5,8,4,7,5,4,8,3,7,3,3,4,8,6,5,6,8,5,5,6,9,7,3,8,6,6,6,5,5,5,4,4,8,5,7,6,9,6,7,5,4,5,3,4,7]
}

代码：

...
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        angle: 30
                    },
                    pad: 0
                }
            },
...

然后我最终得到了一些非常愚蠢的东西......

enter image description here

...而我只是在可能的情况下提供选项中的数据，例如...... 

xaxis: {
    labels: ["48 hours ago", "24 hours ago", "Current time"],
    labelInterval: 48 //at half hour intervals this would be every 24 hours
    ...

基于反馈的其他尝试：

尝试使用此标记数据：

    "new": [["48 hours ago", 11],["", 6],["", 13],["", 7],["", 6],["", 6],["", 6],["", 14],["", 13],["", 8],["", 15],["", 14],["", 10],["", 14],["", 8],["", 13],["", 6],["", 8],["", 15],["", 14],["", 8],["", 8],["", 12],["", 13],["", 12],["", 10],["", 9],["", 7],["", 14],["", 8],["", 14],["", 12],["", 12],["", 13],["", 8],["", 7],["", 6],["", 10],["", 7],["",9],["", 8],["", 14],["", 10],["", 13],["", 12],["", 13],["", 14],["", 9],["", 13],["", 10],["", 9],["", 10],["", 11],["", 13],["", 10],["", 12],["", 11],["", 12],["", 11],["", 13],["", 7],["", 6],["", 6],["", 14],["", 12],["", 7],["", 14],["", 12],["", 6],["", 8],["", 9],["", 7],["", 8],["", 15],["", 7],["", 10],["", 14],["", 6],["", 7],["", 7],["", 15],["", 15],["", 9],["", 15],["", 6],["", 10],["", 11],["", 6],["", 8],["", 9],["", 10],["", 8],["", 14],["", 14],["", 5],["", 10],["Current time", 10]],
    "pending_packaging": [["48 hours ago", 4],["", 3],["", 4],["", 3],["", 1],["", 3],["", 4],["", 5],["", 3],["", 2],["", 5],["", 1],["", 3],["", 5],["", 4],["", 4],["", 2],["", 4],["", 5],["", 2],["", 4],["", 2],["", 3],["", 4],["", 2],["", 2],["", 4],["", 1],["", 3],["", 4],["", 2],["", 5],["", 1],["", 4],["", 2],["", 3],["", 1],["", 2],["", 4],["", 4],["", 2],["", 5],["", 5],["", 3],["", 5],["", 2],["", 5],["", 1],["", 4],["", 4],["", 1],["", 4],["", 4],["", 2],["", 2],["", 3],["", 4],["", 4],["", 5],["", 1],["", 2],["", 3],["", 3],["", 3],["", 2],["", 4],["", 1],["", 1],["", 4],["", 4],["", 2],["", 3],["", 2],["", 5],["", 3],["", 3],["", 2],["", 3],["", 2],["", 2],["", 1],["", 4],["", 5],["", 3],["", 3],["", 4],["", 2],["", 1],["", 2],["", 2],["", 3],["", 1],["", 5],["", 4],["", 5],["", 5],["Current time",5]],
    "pending_delivery": [["48 hours ago", 8],["", 7],["", 6],["", 7],["", 8],["", 5],["", 8],["", 7],["", 5],["", 7],["", 6],["", 7],["", 8],["", 8],["", 9],["", 4],["", 9],["", 6],["", 7],["", 6],["", 7],["", 4],["", 3],["", 4],["", 6],["", 6],["", 5],["", 8],["", 5],["", 7],["", 7],["", 4],["", 4],["", 3],["", 7],["", 4],["", 5],["", 6],["", 5],["", 6],["", 6],["", 7],["", 5],["", 4],["", 4],["", 4],["", 7],["", 5],["", 4],["", 8],["", 7],["", 9],["", 5],["", 8],["", 4],["", 7],["", 5],["", 4],["", 8],["", 3],["", 7],["", 3],["", 3],["", 4],["", 8],["", 6],["", 5],["", 6],["", 8],["", 5],["", 5],["", 6],["", 9],["", 7],["", 3],["", 8],["", 6],["", 6],["", 6],["", 5],["", 5],["", 5],["", 4],["", 4],["", 8],["", 5],["", 7],["", 6],["", 9],["", 6],["", 7],["", 5],["", 4],["", 5],["", 3],["", 4],["Current time",7]]

得到这张图：

enter image description here

2 个答案:

答案 0 :(得分：1)

如果要为x轴使用自定义标签，可以按系列组织数据点，如下所示：

$(thing).jqplot([
    // series 1
    [
        ["Label 1", 12],
        ["Label 2", 34]
    ],
    // series 2
    [
        ["Label 1", 56],
        ["Label 2", 78]
    ]
]);

如果您希望保留数据（例如{"Series Name":[val,val,val]}），则可以使用以下语法来使用不是自动计算的x轴刻度： 

$(thing).jqplot(myData,
    // options
    {
        axesDefaults: {
            ticks: [
                [ x_val1, "Label 1" ],
                [ x_val2, "Label 2" ],
                ...
            ]
        }
    }
);

Here's a link到选项的文档。

答案 1 :(得分：0)

我通过将axes.xaxis.ticks参数的options属性设置为此来解决此问题：

["48 Hours Ago"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ","24 Hours Ago"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ","Current"]

基本上，我想要留空的每一列都必须放入一个空格。我假设jqplot检查了一个truthy值，如果是这样，用它替换默认值...因为如果你把一个空字符串它将恢复为默认的迭代值。

这样做很烦人，但在这种情况下，就数字而言，它不需要灵活。如果我必须灵活，我想我会使用其中一个系列的长度来相应地生成刻度。

感谢ampetamachine指出ticks属性（+1）。但是，这个答案并没有像axesDefaults那样有效，它会将这些放在X轴和Y轴上，这绝对不可取，我不确定x_val将被取代的是什么用。这个答案适用于具有相同情况的人。如果有更好的方法，我仍然很好奇。

相关问题
最新问题