无法在xaxis中查看最后一个标签

时间:2015-09-02 13:00:32

标签: highcharts

我们正在创建一个我们正面临一些问题的折线图。某些最后的值未填充xaxis标题,并且这会在图表中绘制,但不会显示在标签部分中。请帮助我们为它提供一些解决方案。 这里有问题: http://jsfiddle.net/58jy1zhd/1/

$(function () {
    $('#container').highcharts({
    xAxis: {
            categories: ["20-04-2015, 6:55 PM","20-04-2015, 7:00 PM","20-04-2015, 7:05 PM","20-04-2015, 7:10 PM","20-04-2015, 7:15 PM","20-04-2015, 7:20 PM","20-04-2015, 7:25 PM","20-04-2015, 7:30 PM","20-04-2015, 7:35 PM","20-04-2015, 7:40 PM","20-04-2015, 7:45 PM","20-04-2015, 7:50 PM","20-04-2015, 7:55 PM","20-04-2015, 8:00 PM","20-04-2015, 8:05 PM","20-04-2015, 8:10 PM","20-04-2015, 8:15 PM","20-04-2015, 8:20 PM","20-04-2015, 8:25 PM","20-04-2015, 8:30 PM","20-04-2015, 8:35 PM","20-04-2015, 8:40 PM","20-04-2015, 8:45 PM","20-04-2015, 8:50 PM","20-04-2015, 8:55 PM","20-04-2015, 9:00 PM","20-04-2015, 9:05 PM","20-04-2015, 9:10 PM","20-04-2015, 9:15 PM","20-04-2015, 9:20 PM","20-04-2015, 9:25 PM","20-04-2015, 9:30 PM","20-04-2015, 9:35 PM","20-04-2015, 9:40 PM","20-04-2015, 9:45 PM","20-04-2015, 9:50 PM","20-04-2015, 9:55 PM","20-04-2015, 10:00 PM","20-04-2015, 10:05 PM","20-04-2015, 10:10 PM","20-04-2015, 10:15 PM","20-04-2015, 10:20 PM","20-04-2015, 10:25 PM","20-04-2015, 10:30 PM","20-04-2015, 10:35 PM","20-04-2015, 10:40 PM","20-04-2015, 10:45 PM","20-04-2015, 10:50 PM","20-04-2015, 10:55 PM","20-04-2015, 11:00 PM","20-04-2015, 11:05 PM","20-04-2015, 11:10 PM","20-04-2015, 11:15 PM","20-04-2015, 11:20 PM","20-04-2015, 11:25 PM","20-04-2015, 11:30 PM","20-04-2015, 11:35 PM","20-04-2015, 11:40 PM","20-04-2015, 11:45 PM","20-04-2015, 11:50 PM","20-04-2015, 11:55 PM","21-04-2015, 12:00 AM","21-04-2015, 12:05 AM","21-04-2015, 12:10 AM","21-04-2015, 12:15 AM","21-04-2015, 12:20 AM","21-04-2015, 12:25 AM","21-04-2015, 12:30 AM","21-04-2015, 12:35 AM","21-04-2015, 12:40 AM","21-04-2015, 12:45 AM","21-04-2015, 12:50 AM","21-04-2015, 12:55 AM","21-04-2015, 1:00 AM","21-04-2015, 1:05 AM","21-04-2015, 1:10 AM","21-04-2015, 1:15 AM","21-04-2015, 1:20 AM","21-04-2015, 1:25 AM","21-04-2015, 1:30 AM","21-04-2015, 1:35 AM","21-04-2015, 1:40 AM","21-04-2015, 1:45 AM","21-04-2015, 1:50 AM","21-04-2015, 1:55 AM","21-04-2015, 2:00 AM","21-04-2015, 2:05 AM","21-04-2015, 2:10 AM","21-04-2015, 2:15 AM","21-04-2015, 2:20 AM","21-04-2015, 2:25 AM","21-04-2015, 2:30 AM","21-04-2015, 2:35 AM","21-04-2015, 2:40 AM","21-04-2015, 2:45 AM","21-04-2015, 2:50 AM","21-04-2015, 2:55 AM","21-04-2015, 3:00 AM","21-04-2015, 3:05 AM","21-04-2015, 3:10 AM","21-04-2015, 3:15 AM","21-04-2015, 3:20 AM","21-04-2015, 3:25 AM","21-04-2015, 3:30 AM","21-04-2015, 3:35 AM","21-04-2015, 3:40 AM","21-04-2015, 3:45 AM","21-04-2015, 3:50 AM","21-04-2015, 3:55 AM","21-04-2015, 4:00 AM","21-04-2015, 4:05 AM","21-04-2015, 4:10 AM","21-04-2015, 4:15 AM","21-04-2015, 4:20 AM","21-04-2015, 4:25 AM","21-04-2015, 4:30 AM","21-04-2015, 4:35 AM","21-04-2015, 4:40 AM","21-04-2015, 4:45 AM","21-04-2015, 4:50 AM","21-04-2015, 4:55 AM","21-04-2015, 5:00 AM","21-04-2015, 5:05 AM","21-04-2015, 5:10 AM","21-04-2015, 5:15 AM","21-04-2015, 5:20 AM","21-04-2015, 5:25 AM","21-04-2015, 5:30 AM","21-04-2015, 5:35 AM","21-04-2015, 5:40 AM","21-04-2015, 5:45 AM","21-04-2015, 5:50 AM","21-04-2015, 5:55 AM","21-04-2015, 6:00 AM","21-04-2015, 6:05 AM","21-04-2015, 6:10 AM","21-04-2015, 6:15 AM","21-04-2015, 6:20 AM","21-04-2015, 6:25 AM","21-04-2015, 6:30 AM","21-04-2015, 6:35 AM","21-04-2015, 6:40 AM","21-04-2015, 6:45 AM","21-04-2015, 6:50 AM","21-04-2015, 6:55 AM","21-04-2015, 7:00 AM","21-04-2015, 7:05 AM","21-04-2015, 7:10 AM","21-04-2015, 7:15 AM","21-04-2015, 7:20 AM","21-04-2015, 7:25 AM","21-04-2015, 7:30 AM","21-04-2015, 7:35 AM","21-04-2015, 7:40 AM","21-04-2015, 7:45 AM","21-04-2015, 7:50 AM","21-04-2015, 7:55 AM","21-04-2015, 8:00 AM","21-04-2015, 8:05 AM","21-04-2015, 8:10 AM","21-04-2015, 8:15 AM","21-04-2015, 8:20 AM","21-04-2015, 8:25 AM","21-04-2015, 8:30 AM","21-04-2015, 8:35 AM","21-04-2015, 8:40 AM","21-04-2015, 8:45 AM","21-04-2015, 8:50 AM","21-04-2015, 8:55 AM","21-04-2015, 9:00 AM","21-04-2015, 9:05 AM","21-04-2015, 9:10 AM","21-04-2015, 9:15 AM","21-04-2015, 9:20 AM","21-04-2015, 9:25 AM","21-04-2015, 9:30 AM","21-04-2015, 9:35 AM","21-04-2015, 9:40 AM","21-04-2015, 9:45 AM","21-04-2015, 9:50 AM","21-04-2015, 9:55 AM","21-04-2015, 10:00 AM","21-04-2015, 10:05 AM","21-04-2015, 10:10 AM","21-04-2015, 10:15 AM","21-04-2015, 10:20 AM","21-04-2015, 10:25 AM","21-04-2015, 10:30 AM","21-04-2015, 10:35 AM","21-04-2015, 10:40 AM","21-04-2015, 10:45 AM","21-04-2015, 10:50 AM","21-04-2015, 10:55 AM","21-04-2015, 11:00 AM","21-04-2015, 11:05 AM","21-04-2015, 11:10 AM","21-04-2015, 11:15 AM","21-04-2015, 11:20 AM","21-04-2015, 11:25 AM","21-04-2015, 11:30 AM","21-04-2015, 11:35 AM","21-04-2015, 11:40 AM","21-04-2015, 11:45 AM","21-04-2015, 11:50 AM","21-04-2015, 11:55 AM","21-04-2015, 12:00 PM","21-04-2015, 12:05 PM","21-04-2015, 12:10 PM","21-04-2015, 12:15 PM","21-04-2015, 12:20 PM","21-04-2015, 12:25 PM","21-04-2015, 12:30 PM","21-04-2015, 12:35 PM","21-04-2015, 12:40 PM","21-04-2015, 12:45 PM","21-04-2015, 12:50 PM","21-04-2015, 12:55 PM","21-04-2015, 1:00 PM","21-04-2015, 1:05 PM","21-04-2015, 1:10 PM","21-04-2015, 1:15 PM","21-04-2015, 1:20 PM","21-04-2015, 1:25 PM","21-04-2015, 1:30 PM","21-04-2015, 1:35 PM","21-04-2015, 1:40 PM","21-04-2015, 1:45 PM","21-04-2015, 1:50 PM","21-04-2015, 1:55 PM","21-04-2015, 2:00 PM","21-04-2015, 2:05 PM","21-04-2015, 2:10 PM","21-04-2015, 2:15 PM","21-04-2015, 2:20 PM","21-04-2015, 2:25 PM","21-04-2015, 2:30 PM","21-04-2015, 2:35 PM","21-04-2015, 2:40 PM","21-04-2015, 2:45 PM","21-04-2015, 2:50 PM","21-04-2015, 2:55 PM"],
            title: {
            text: 'Time'
            },
            labels: {
            rotation: -90,
            },
            showLastLabel: true,
            endOnTick: true
        },
    series: [{
            name: 'TEST',
            data: [124.22,125.67,127.12,122.77,122.77,121.33,121.33,119.89,122.77,122.77,124.22,121.33,122.77,124.22,121.33,119.89,119.89,119.89,122.77,119.89,118.46,118.46,119.89,119.89,122.77,121.33,121.33,121.33,122.77,121.33,122.77,121.33,121.33,124.22,119.89,119.89,121.33,121.33,122.77,119.89,118.46,118.46,119.89,117.03,118.46,117.03,119.89,117.03,117.03,118.46,118.46,121.33,121.33,122.77,122.77,121.33,125.67,124.22,127.12,125.67,124.22,128.58,125.67,127.12,122.77,127.12,121.33,121.33,115.6,111.35,112.76,105.74,107.14,107.14,104.35,100.2,98.83,101.58,100.2,97.45,97.45,96.09,94.72,93.36,93.36,94.72,96.09,93.36,93.36,92.01,93.36,92.01,92.01,92.01,94.72,92.01,89.31,89.31,90.66,92.01,87.97,87.97,89.31,87.97,90.66,89.31,89.31,90.66,89.31,90.66,92.01,90.66,86.63,87.97,89.31,89.31,86.63,89.31,87.97,87.97,86.63,86.63,87.97,85.29,87.97,87.97,87.97,87.97,86.63,87.97,86.63,87.97,85.29,86.63,86.63,85.29,86.63,85.29,86.63,87.97,86.63,86.63,85.29,85.29,85.29,83.96,85.29,85.29,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,82.63,83.96,82.63,81.31,82.63,83.96,82.63,82.63,82.63,79.98,81.31,81.31,82.63,82.63,81.31,81.31,81.31,81.31,81.31,82.63,81.31,81.31,79.98,79.98,79.98,81.31,79.98,79.98,79.98,79.98,79.98,79.98,79.98,79.98,79.98,78.67,79.98,79.98,78.67,78.67,79.98,78.67,82.63,79.98,78.67,79.98,78.67,78.67,77.35,78.67,77.35,78.67,78.67,78.67,79.98,83.96,90.66,92.01,94.72,97.45,100.2,102.96,105.74,101.58,98.83,96.09,94.72,93.36,92.01,89.31,90.66,89.31,86.63,85.29,86.63,85.29,85.29,85.29,82.63,83.96,82.63,82.63]
        }]
    });
});

此网址中的图表显示最后一个xaxis值为243而不是" 21-04-2015,2:55 PM" value,这是系列中的最后一个。 尝试过:

showLastLabel:true, endOnTick:true

但没有运气。

提前致谢,Naveen。

1 个答案:

答案 0 :(得分:2)

这种情况正在发生,因为你有太多的标签,你试图在轴上显示。它现在只显示每个第三个标签,它的结束方式,最后两个类别不在循环中。

你可以做两件事。

1)减少标签的字体大小,并查看www.example.com/cronjobs/reset_resellersstep属性。

示例:

但实际上,这只是一种愚蠢的行为。这有太多的标签可以理解,并且它使用了整个视觉空间的一半来显示它们,并且必须侧向显示它们,使得它更难以理解。

所以我建议2)使用日期时间轴。您拥有所有日期信息。您可以将这些日期作为数据的x值传递,或者,如果它们始终是统一的(即相距相同的距离),就像它们看起来已经存在一样,您可以使用{{1} }和tickInterval属性。

示例:

它没有显示每个标签。但它非常徒劳,最终无法尝试展示时间序列的每个标签。

您可以操纵轴以确保它显示第一个和最后一个,并且您可以格式化标签输出以包含日期部分或您想要的任何其他内容。

[[edit 添加标签格式参考链接:

使用格式化程序功能显示每个刻度的日期和时间的示例,每4小时打勾一次: