Question

我有一个带有连续日期时间X轴的Google图表。我的数据是短暂的，突发之间有很长的延迟。我想使图表具有非连续的X轴，但在样本期间仍然具有自动生成的时间戳。这可能吗？

基本上，我说我有3个样本，每个样本有300个数据点，每隔10秒记录一次，但它们之间有小时间隔。我想让我的图表以缩放级别显示30秒的数据，以便区分。我被困了吗？

编辑：Per @jmac的建议，下面是数据的示例：

1360096658270, 10.228335 1360096658274, 10.308437 1360096658277, 10.294770 [...] 1360096673968, 9.014943 1360096673969, 8.971434 1360096673970, 9.041739 1360096673971, 9.097484 ^^-- 15 seconds <--- (~10 days) 1360989176509, 9.856928 1360989176513, 9.852907 1360989176517, 9.861740 1360989176523, 9.820416 1360989176527, 9.871401

Answer 1

方法1：多个图表

这可能是最简单的概念（虽然仍然很麻烦）。

要点：

将数据拆分为组（消除间隙）
为每个组创建单独的图表
消除第一个
创建一致的vAxis最小/最大值
使用CSS将图表排成一行

详细说明：

如果您有静态数据集，可以手动拆分。如果它不是静态的，那么你必须编写一些javascript来分割你的数据。我不能真正帮助你，因为我不知道你的数据如何运作。

就设置图表而言，我会把它留给你。我不知道你希望它们如何格式化，所以我再也无法帮助你了解当前的信息。

要为所有图表创建一致的轴值，您需要在javascript函数中使用一些基本数学，为每个vAxis max / min值指定相同的数字。这是一个示例：

// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Define the number of gridlines (default 5)
var gridlines = 5;

// Determine an appropriate gap between gridlines
var interval = range / (gridlines - 1);

// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;

// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;

方法2：多个系列

只要查看您的数据的人了解他们是不同的集合，那么只要他们可以轻易地在其他地方找到它，就没有理由说轴需要说出确切的日期/时间。

要点：

将每个'序列'的数据分成不同的系列
人为地缩短序列之间的间隙（如果它们各15秒，那么系列之间有5秒的差距，或者每15秒就开始一次）
在运行开始/结束时使用名称标记每个不同系列的格式

详细说明：

同样，您必须手动拆分数据或创建javascript来执行此操作，但您要做的是将每组数字移动到其自己的列中，如下所示：

1360096658270, 10.228335, null
1360096658274, 10.308437, null
1360096658277, 10.294770, null
[...]
1360096673968, 9.014943, null
1360096673969, 8.971434, null
1360096673970, 9.041739, null
1360096673971, 9.097484, null
^^-- 15 seconds
<--- (~10 days)
1360989176509, null, 9.856928
1360989176513, null, 9.852907
1360989176517, null, 9.861740
1360989176523, null, 9.820416
1360989176527, null, 9.871401

这将使每个系列成为不同的颜色（并且在图例/鼠标悬停时具有不同的标签），因此您可以看到运行之间的差异，但也可以获得一个很好的工具提示“此数据是从X收集到的Y“因此，如果数据采集的时间很重要，它仍然在那里（尽管不在X轴上）。

这是最简单的方法。

方法3：手动编辑X轴标签

第三种方式是最灵活但也需要最多的工作。您可以创建自定义javascript函数来操纵SVG中的X轴标签。有关此here的详细信息，请访问@jeffery_the_wind：

/*
 *
 * The following 2 functions are a little hacky, they have to be done after calling the "draw" function
 * The bubble chart originally displays only numbers along the x and y axes instead of customer or product names
 * These 2 functions replace those numbers with the words for the customers and products
 *
 */
for ( var i = -2; i < products.length + 1; i ++ ){
    $('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){
        if (t == i){
            if (i >= products.length || i < 0){
                return " ";
            }
            return products[i];
        }
    });
}

for ( var i = -2; i <= customers.length + 3; i ++ ){
    $('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
        if (i >= customers.length + 1 || i <= 0){
            return " ";
        }else if (t == i){                    
            return customers[i-1];
        }
    });
}

Answer 2

Google关于customizing axes的文档描述了如何做你要问的事情。您可以将列的类型更改为字符串，并使用格式化的日期字符串填充。

谷歌图表连续轴数据的差距

2 个答案: