Question

我还没有看到你如何将图形的一部分设为蓝色，然后是一个绿色，等等。你可以做不同的系列，但这对我没用。我想要一个部分，从时间x到时间y说一种颜色，然后时间y到时间z另一种颜色。

Answer 1

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

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

Dygraphs为你挑选一些颜色做得非常好，但是如果你想自己控制它，你可以做到以下几点。

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

其中数据格式正确dygraph data array。在配置您的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作为您的数据集。

Dygraphs，您可以为同一系列中的图形部分着色吗？

1 个答案: