Как я могу переместить ось х, как окно в Google Chart, в то время как х увеличивается - PullRequest
Новая
       43

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

0 голосов
/ 06 февраля 2019

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

1 Ответ

0 голосов
/ 06 февраля 2019

Согласно документации на [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-кратные значения в представлении, разделите viewWidth на 10, чтобы получить один xWidth.Теперь вы можете каждый раз заново визуализировать диаграмму, задав ширину no.of X values * xWidth, чтобы она прокручивалась соответственно

...