Как переместить ось x, как окно в диаграмме Google, в то время как x увеличивается

Я хотел бы нарисовать диаграмму в своем html, диаграмма, которую я использую, - это диаграмма Google. Однако, в то время как мое значение 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. вместо этого, если мы хотим увидеть самое раннее значение, мы можем просто прокрутить влево.


google-visualization pygooglechart
person Liu Hantao    schedule 06.02.2019    source источник
comment
Google отвечает на этот вопрос с помощью элемента управления ChartRangeFilter...   -  person WhiteHat    schedule 06.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Согласно документации на странице [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
  };

Чтобы получить scrollable div, вы можете поместить свою диаграмму в другой 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 div в javascript и разделив ее на количество x-точек, которые вы хотите в окне, а затем умножив его на общее количество x, которое у вас есть, и установив его как ширину диаграммы.

Обновление: изначально получите ширину h-scrollable как let viewWidth = document.querySelector(".h-scrollable").offsetWidth [см.: Как найти ширину div с помощью необработанного JavaScript?

Затем, если вы хотите отобразить 10 x значений в представлении, разделите viewWidth на 10, чтобы получить одно xWidth. Теперь вы можете каждый раз перерисовывать диаграмму, устанавливая ширину как no.of X values * xWidth, чтобы она прокручивалась соответствующим образом.

person Dhananjai Pai    schedule 06.02.2019
comment
Оно не изменяет минимальное значение по мере роста значения x, поэтому оно не похоже на скользящее окно. Мне интересно, есть ли метод, которому не нужно перерисовывать диаграмму и который может это сделать. - person Liu Hantao; 06.02.2019
comment
Под скользящим окном вы имеете в виду горизонтальную прокрутку? - person Dhananjai Pai; 06.02.2019
comment
да. Я хочу, чтобы, скажем, если максимальное значение x, которое я разрешил отображать на экране, равно 10, то на диаграмме будут отображаться только точки данных от 0 до 9, а затем от 1 до 10. - person Liu Hantao; 06.02.2019
comment
@LiuHantao посмотрите обновленный ответ и спросите, если у вас возникнут проблемы или проблемы с пониманием. Надеюсь, поможет - person Dhananjai Pai; 06.02.2019
comment
Спасибо! Теперь мне интересно, как мне взять ширину из h-scrollable и сбросить диаграмму? Я создал диаграмму только в начале, поэтому мне нужно воссоздать диаграмму или просто обновить xMin и xMax? - person Liu Hantao; 06.02.2019
comment
возможно, вам придется заново создавать диаграмму каждый раз, поскольку ширина также должна увеличиваться, и, следовательно, масштабы и график также должны быть пересчитаны. - person Dhananjai Pai; 06.02.2019