滑动图表

This commit is contained in:
zogodo
2020-02-21 22:28:58 +08:00
parent ee3bb7cb02
commit 55ae3ad3aa
2 changed files with 248 additions and 225 deletions

View File

@@ -150,8 +150,9 @@
</div>
</div>
<div class="page page1 mdl-card__supporting-text mdl-shadow--2dp mdl-cell mdl-cell--8-col">
<div class="ct-chart ct-perfect-fourth"></div>
<div id="ct-chart-par" class="page page1 mdl-card__supporting-text mdl-shadow--2dp mdl-cell mdl-cell--8-col"
style="height:300px;overflow-x:scroll;overflow-y:hidden;">
<div id="ct-chart" class="ct-chart ct-perfect-fourth" style="height:280px;"></div>
</div>
<div class="page page2 demo-charts mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
@@ -311,6 +312,7 @@
};
var t = new Chartist.Line('.ct-chart', data, {showArea: true});
var power_idx = 0;
var chart_wth = 0;
function GetPowerRecord() {
$.ajax({
url: "/power",
@@ -323,7 +325,14 @@
power.powers.forEach(element => {
data.series[0].push(element/10);
});
chart_wth += power.powers.length;
$("#ct-chart").width(chart_wth * 10);
t.update(data);
var power_line = document.getElementById("ct-chart-par");
if (power.powers.length != 0 && power_line.scrollWidth - power_line.offsetWidth - power_line.scrollLeft < 10) {
power_line.scrollTo(power_line.scrollWidth, 0); //滑动到最后
}
power_line.scrollTo(power_line.scrollWidth, 0); //滑动到最后
window.setTimeout(GetPowerRecord, 3000);
},
error: AjaxErr