Dygraph время от времени меняет ось х - PullRequest
Новая
       8

Dygraph время от времени меняет ось х

0 голосов
/ 06 декабря 2018

У меня есть график, показывающий частоту сердечных сокращений (у) / время (х).Одним щелчком мыши я хочу изменить ось x на расстояние, перерисовывая график.Я посмотрел на dygraph документы и примеры, но не могу понять, как это сделать.Мне кажется, мне нужны updateOptions, и я могу делать такие вещи, как изменение цвета линии и т. д., но я не вижу, где попросить dygraph выбрать данные для x.

Пример кода ниже, с некоторыми примерами данных,Первый столбец - Время, последний столбец - расстояние. 

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />
<style> .graph {        width: 100%;        height: 250px;  } </style>
<head><body>
<div id="rideData" class="graph"></div>
<button id="xdistance">Distance</button><button id="xtime">Time</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<script>
g = new Dygraph(
document.getElementById("rideData"),
[
[22,0,248,90,153.4,28.44,110.4],
[23,0,290,91,153.4,28.8,118.6],
[24,0,241,93,153.4,29.16,126.9],
[25,0,87,93,153.4,29.16,134.9],
[26,0,122,92,153.4,29.16,143.1],
[27,0,240,94,153.4,29.52,151.4],
[28,0,263,95,153.4,29.88,160],
[29,0,328,98,153.4,30.24,168.9],
[30,0,325,101,153.6,30.96,177.9],
[31,0,271,103,153.6,31.68,187.2],
[32,0,255,98,153.6,32.4,196.5],
[33,0,304,96,153.6,33.12,206]
],
{
    legend: 'always',
    animatedZooms: true,
    labels: ['Time', 'Heart Rate', 'Power', 'Cadence', 'Altitude', 'Speed', 'Distance'],
    ylabel: 'HR/W/rpm/alt/spd',
    xlabel: 'Time/ s',
    colors: ["#ff0000", "#9d00ff", "#85ef64", "#a6a6a6", "#6699ff","#6699ff"],
    visibility: [true, true, true, true, true, false],
    series: {
    'Altitude': { fillGraph: true }
}
});

$("#xdistance").click(function(){
    g.updateOptions({
        colors: ["#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000","#ff0000"],
        axes: {
            x: {
                //?? Want to change the x axis from Time to Distance
            }
        }
    });
});
</script>
</body></html>
...