Question

我有一个显示心率（y）/时间（x）的图表。通过单击，我想将x轴更改为距离，从而重新绘制图形。我看过dygraph文档和示例，但似乎看不到该怎么做。 updateOptions似乎是我所需要的，并且我可以执行诸如更改线条颜色之类的操作，但是我看不到在哪里要求dygraph为x选择数据。

下面的示例代码，附带一些示例数据。第一个col是时间，最后一个col是距离。

<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>

笔画变化x轴从时间到数字

0 个答案: