dygraph изменить цвет линии

Я хочу изменить цвет линии на диаграмме dygraph со значением.
Пример, когда мои данные больше 2, я хочу изменить цвет.

Я пробую вариант цвета, но меняю только цвет точки.

Я создаю здесь JsFiddle.

Это мой вариант dygraph:

color: function (color, d) {
    if (typeof d.index === 'undefined') { return color; }

    var val = columns[0][d.index + 1];

    if (val >= 0 && val <= 150) {
        color = 'green';
    } else if (val > 150 && val <= 300) {
        color = 'yellow';
    } else if (val > 300) {
        color = 'red';
    }

    return color;
}

javascript dygraphs
person J.Sortido    schedule 08.02.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Как вы обнаружили, вы не можете установить color в функцию. Однако вы можете использовать несколько более общий вариант drawPointCallback, который позволяет рисовать любую фигуру любым цвет для каждой точки:

function coloredCircle(g, series, ctx, cx, cy, color, radius, idx) {
  var y = g.getValue(idx, 1);
  var pointColor = y < 5 ? 'green' : 'blue';
  ctx.save();
  ctx.fillStyle = pointColor;
  ctx.beginPath();
  ctx.arc(cx, cy, radius, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();
}

g = new Dygraph(
    div, data,
    {
      series: {
        Y: {
          drawPointCallback: coloredCircle,
          pointSize: 5,
          drawPoints: true
        }
      }
    });

Вот полностью работающая скрипта. Дополнительные примеры drawPointCallback см. в демонстрации пользовательских кругов.

person danvk    schedule 08.02.2018
comment
Большое спасибо, ваша библиотека очень классная! - person J.Sortido; 09.02.2018