-3

我还没有看到如何将图表的一部分制作成蓝色，然后变成绿色，等等。您可以制作不同的系列，但这对我没有用。我想要一个部分，比如说从时间 x 到时间 y 一种颜色，然后时间 y 到时间 z 另一个。

4

1 回答 1

0

这种类型的功能在 dygraphs 中作为原生功能是不可能的。但是，可以通过将曲线的不同“部分”提供为完全不同的时间序列来实现。这很简单。

除了原始时间序列之外，您还可以编写一个函数，在其中传递一个日期时间数组作为参数。然后，该函数将根据您的日期时间数组拆分时间序列，并返回一组您可以正常绘制的 dygraph 友好数组。

Dygraphs 可以很好地为您选择一些颜色，但如果您想自己控制，您可以执行以下操作。

g = new Dygraph(
    document.getElementById("yourDiv"),
    data,
    {
        colors: ["#123123", '#321312', '#222333', '#111222']
    }       
);

其中 data 是格式正确的dygraph 数据数组。在配置 dygraph 时，您几乎肯定会想要指定其他一些选项，但在上面的示例代码中，我已经向您展示了如何为不同系列设置颜色。

拆分你的时间序列有点复杂，但不是真的。在上面的代码中，我假设您有 4 个不同的时间序列，因此有 4 种不同的颜色。如果您在拆分时间序列方面需要帮助，我建议您仔细考虑如何使用伪代码（或您知道的任何编码语言）来实现这一点，我很乐意带您了解 JS。

例如，假设您的个人时间序列如下：

var basicTimeseries = [
    [1384337076000, 123],
    [1384337077000, 321],
    [1384337078000, 111],
    [1384337079000, 222],
    [1384337080000, 333],
    [1384337081000, 132],
    [1384337082000, 321],
    [1384337083000, 122],
    [1384337084000, 322],
    [1384337085000, 333]
]

这是一个数组数组，在辅助（内部）数组中，你有你的 ms 时间戳，然后是你的值。假设您想根据您已经知道的某些规则将其分成三个单独的时间序列（例如，1384337079000 之前的数据，1384337082000 之前的数据，以及之后的数据直到时间结束）并且您已经确定您想要把你的时间序列分成三个不同的曲线。您现在想要在 dygraphs 上绘制这些。您应该已经知道 dygraphs 接受的数据结构。例如：

var dygraphData = [
    [X1,Y1, ... , N1],
    [X2,Y2, ... , N2],
    [X3,Y3, ... , N3],
    [X4,Y4, ... , N4]
]

其中数据结构是数组数组，在第二个（内部）数组中包含您的 x 轴值，然后是每个时间序列曲线在该特定 x 轴值处的点。

您可以执行以下操作：

var dygraphData = []; // Initialise
$each.(basicTimeseries, function (i,e) {
    dygraphData[i] = []; // Initialise
    if ( e[0] < 1384337076000 ) {
        dygraphData[i].push([e[0], e[1], NaN, NaN]); // Push the x-axis and 1st curve
    } else if ( e[0] >= 1384337076000 && e[0] < 1384337082000) {
        dygraphData[i].push([e[0], NaN, e[1], NaN]); // Push the x-axis and 2nd curve
    } else if ( e[0] >= 1384337082000) {
        dygraphData[i].push([e[0], NaN, NaN, e[1]]); // Push the x-axis and 3rd curve
    } else {
        console.log("How did this happen?");
    }
});

显然，上面的代码过于冗长而且非常死板，但它应该可以帮助您理解发生了什么。然后，您可以调用 dygraphs 传递 dygraphData 作为您的数据集。

于 2013-11-11T11:36:08.483 回答