Остановить автомат c изменение диапазона оси Y на графиках? - PullRequest
Новая
       43

Остановить автомат c изменение диапазона оси Y на графиках?

0 голосов
/ 02 апреля 2020

Рассмотрим пример этого jsfiddle: https://jsfiddle.net/6xbj847x/1/

HTML: 

Graph
<div id="graphdiv"></div>

JS: 

var g = new Dygraph(document.getElementById("graphdiv"),
    [
        [0, 1],     // Starts at height 1, step width is 2
        [2, 2],     // step width is 1
        [3, 3],     // step width is 0.5
        [3.5, 4],   // step width is 0.25
        [3.75, 5],  // remainder is at height 5
    ],
    {
        stepPlot: true,
        labels: ["XX","YY"],
        series: {
            "YY": {stepPlot: true}
        }
    });
g.ready(function() {
    g.setAnnotations([
    {      
      series: "YY",
      x: 0,
      shortText: "2"
    },
    {      
      series: "YY",
      x: 2,
      shortText: "1"
    },
    {      
      series: "YY",
      x: 3,
      shortText: ".5"
    }
    ]);    
  });

Когда это показано в начале, ось Y показывает диапазон от 0 до 5:

range 1

Затем я делаю масштабирование "X": влево щелкните мышью немного перед x = 2; при нажатии перетащите вправо, затем отпустите где-нибудь после x = 2; график обновляется, и диапазон x обновляется, как и ожидалось:

range 2

... но также автоматически обновляется ось y, и теперь она показывает диапазон от 0 до 3 (или около того)!

Как я могу предотвратить автоматическое c обновление оси y при выборочном увеличении на графиках - так что всегда отображается начальный диапазон оси y?

1 Ответ

0 голосов
/ 02 апреля 2020

Хорошо, понял:

http://dygraphs.com/options.html

valueRange #

Явно установите вертикальный диапазон графика на [ низкий высокий]. Это может быть установлено для каждой оси, чтобы определить каждую ось Y отдельно. Если какой-либо лимит не указан, он будет рассчитан автоматически (например, [ноль, 30] для автоматического расчета только нижней границы)

Итак, решение: 

var g = new Dygraph(document.getElementById("graphdiv"),
    [
        [0, 1],     // Starts at height 1, step width is 2
        [2, 2],     // step width is 1
        [3, 3],     // step width is 0.5
        [3.5, 4],   // step width is 0.25
        [3.75, 5],  // remainder is at height 5
    ],
    {
        stepPlot: true,
        labels: ["XX","YY"],
        series: {
            "YY": {stepPlot: true}
        },
        valueRange: [0, 5.5], // fix y range axis here, so it does not autoupdate on zoom
    });
g.ready(function() {
    g.setAnnotations([
    {      
      series: "YY",
      x: 0,
      shortText: "2"
    },
    {      
      series: "YY",
      x: 2,
      shortText: "1"
    },
    {      
      series: "YY",
      x: 3,
      shortText: ".5"
    }
    ]);    
  });
...