javascript - Google 图表连续轴上的数据差距

Question

我有一个带有连续日期时间 X 轴的 Google 图表。我的数据以短突发形式出现，突发之间有很长的延迟。我想让图表具有不连续的 X 轴，但仍然具有样本期间自动生成的时间戳。这可能吗？

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

编辑:根据@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:多个图表

这可能是最简单的概念(尽管仍然很麻烦)。

摘要:

1. 将数据分组(消除间隙)
2. 为每个组创建单独的图表
3. 消除第一个图表之后的每个图表的 vAxis 标签
4. 创建一致的 vAxis 最小/最大值
5. 使用 CSS 将图表并排排列

详细信息:

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

至于设置图表，我将把它留给你。我不知道您希望如何格式化它们，所以我再次无法真正帮助您了解当前信息。

要为所有图表创建一致的轴值，您需要在 JavaScript 函数中使用一些基本数学运算，为每个 vAxis 最大/最小值分配相同的数字。这是一个示例:

// 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:多个系列

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

摘要:

1. 将每个“序列”的数据分成不同的系列
2. 人为地缩短序列之间的间隙(如果每个序列为 15 秒，则系列之间有 5 秒的间隙，或者每 15 秒开始一次)
3. 在运行开始/结束时使用名称标签格式化每个不同的系列

详细信息:

同样，您必须手动拆分数据或创建 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];
        }
    });
}