0

我想在我的 html 中绘制一个图表，我使用的图表是谷歌图表。然而，当我的 x 值增加时，图表变得越来越大。但我只想要一个固定大小的窗口，它会增加最小 x 值和最大 x 值。就像滑动窗口一样。

下面的附件是我的代码。这是更新获取值并更新图表的 js 代码

// load google charts library
google.load("visualization", "1", {packages:["corechart"]});

// for rest, walk, fast_walk data
var data, options, chart;

var xMin = 0;
var xMax = 10;

var i = 0;


/* initialize chart1 - rest, walk, fast_walk data */
function drawChart(data, options) {
    var chart = new 
    google.visualization.LineChart(document.getElementById('data-container'));
    chart.draw(data, options);
    return(chart);
}

/* update the chart1 - rest, walk, fast_walk data */
function updateChart(percentage) {
    i = (i + 1);

    data.addRow([
        ""+i,
        percentage
    ]);

    if(xMax >= 9) {
      xMin + 1;
    }
    xMax + 1;

    chart.draw(data, options);
}

$(function() {

    data = google.visualization.arrayToDataTable([
        ['Time', 'percentage'],
        ['0', 0],
    ]);

    options = {
        title: 'Energy data',
        "curveType": "function",
        vAxis: {
          min: xMin,
          max: xMax
        }
    };

    chart = drawChart(data, options);
});


/* reset charts */
function reset(){
    i = 0;

    data = google.visualization.arrayToDataTable([
        ['Time', 'percentage'],
        ['0', 0],
    ]);

    options = {
        title: 'Energy data',
        "curveType": "function",
        hAxis: {
          viewWindow: {
              min: 0,
              max: 10
          }
        }
    };

    chart = drawChart(data, options);
}

我想知道它是否可以设计成滑动窗口，这样x值就不会坚持最小值0。相反，如果我们想看到最早的值，我们可以向左滚动。

4

1 回答 1

0

根据 [ https://developers.google.com/chart/interactive/docs/gallery/linechart]上的文档

/* copied from site*/
var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900, //<--- set fixed width like so
    height: 500
  };

要获取scrollablediv，您可以将图表包装在另一个 div 中

<div class='h-scrollable' > <!---- chart code here ----> </div>

和CSS

.h-scrollable {
    width: 100%;
    overflow: hidden;  // only if you don't want y axis to be scrollable
    overflow-x: auto;
}

现在，为图表给出一个宽度，具体取决于您拥有的 x 值的数量。h-scrollbale您可以通过在 javascript 中获取 div 的宽度并将其除以窗口中所需的 x 点数然后将其乘以您拥有的总 x 值并将其设置为图表宽度来进行数学计算。

更新：最初获取 h-scrollable 的宽度let viewWidth = document.querySelector(".h-scrollable").offsetWidth [参考：如何使用原始 JavaScript 查找 div 的宽度？

然后，如果您想在视图中显示 10 个 x 值，请将 viewWidth 除以 10 得到 1 xWidth。现在您可以通过设置宽度每次重新渲染图表，no.of X values * xWidth以便它相应地滚动

于 2019-02-06T02:57:28.473 回答