3

dygraph を使用して、一定期間の温度測定値をグラフ化しています。高/低しきい値を表す 2 つの線を y 軸に追加しようとしています。

これは現在、2 つの追加の定数データ シリーズを使用して達成されていますが、もっと良い方法があると思います。

underlayCallbackより良いオプションのように見えますが、canvas.fillRectおよびg.toComCoordsプロパティを使用して線を描画する方法が明確ではありません。

現在、垂直線をレンダリングしている以下のサンプル ( http://dygraphs.com/tests/highlighted-region.html ) に取り組んでいます。任意の支援をいただければ幸いです。

var g = new Dygraph(
          document.getElementById("div_g"),
          data,
          {
            labels: ['X', 'Est.', 'Actual'],
            animatedZooms: true,
            underlayCallback: function(canvas, area, g) {
              var bottom_left = g.toDomCoords(300, -20);
              var top_right = g.toDomCoords(301, +20);

          var left = bottom_left[1];
          var right = top_right[0];

          canvas.fillStyle = "rgba(255, 0, 0, 1)";
          canvas.fillRect(right, area.y, 1, area.h);
        }

      }
  );

興味のある方は、次を使用して目的の結果を達成してください。

underlayCallback: function(canvas, area, g) {
          var LowCoords = g.toDomCoords(0, 2.25);   
          var HighCoords = g.toDomCoords(0, 4);

          var high = HighCoords[1];
          var low = LowCoords[1];

          canvas.fillStyle = 'red';
          canvas.fillRect(area.x, low, area.w, 2);
          canvas.fillStyle = 'blue';
          canvas.fillRect(area.x, high, area.w, 2);
          }
4

2 に答える 2