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

Question

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

基本上，假设我有 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. 将数据分成几组(消除差距)
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;

方法二:多系列

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

总结:

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];
        }
    });
}