Блог

Главная - Вопросы по программированию - Линия тренда Google Диаграммы для ненулевых значений

Линия тренда Google Диаграммы для ненулевых значений

#javascript #charts #google-visualization

Вопрос:

Я работаю над добавлением линейной линии тренда на свой график, которая представляет собой 24-часовые часы. Только некоторые часы будут содержать данные. В моем примере я ожидаю положительной тенденции, учитывая, что у меня есть данные только за 7-10 часов.

Похоже, что все нулевые значения вносят свой вклад в линию тренда в моем примере кода. Это приводит к отрицательной линии тренда.

Есть ли способ заставить линию тренда применяться только к тем значениям, которые присутствуют?

Как всегда, спасибо экспертам!

 google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Hour', 'Value'],
          [0, 0],
          [1, 0],
          [2, 0],
          [3, 0],
          [4, 0],
          [5, 0],
          [6, 0],
          [7, 5],
          [8, 15],
          [9, 10],
          [10, 20],
          [11, 0],
          [12, 0],
          [13, 0],
          [14, 0],
          [15, 0],
          [16, 0],
          [17, 0],
          [18, 0],
          [19, 0],
          [20, 0],
          [21, 0],
          [22, 0],
          [23, 0],
          [24, 0]
        ]);

        var options = {
          title: 'Task completed per Hour',
          vAxis: {
            title: 'Count'
          },
          hAxis: {
            title: 'Hour',
            slantedText: false,
            ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
          },
          seriesType: 'bars',
          series: {},
          trendlines: {
            0: {type: 'linear'}
          },
          isStacked: false
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);

      } 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" ></div>

Ответ №1:

попробуйте заменить ноль на null

см. Следующий рабочий фрагмент…

 google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Hour', 'Value'],
    [0, null],
    [1, null],
    [2, null],
    [3, null],
    [4, null],
    [5, null],
    [6, null],
    [7, 5],
    [8, 15],
    [9, 10],
    [10, 20],
    [11, null],
    [12, null],
    [13, null],
    [14, null],
    [15, null],
    [16, null],
    [17, null],
    [18, null],
    [19, null],
    [20, null],
    [21, null],
    [22, null],
    [23, null],
    [24, null]
  ]);

  var options = {
    title: 'Task completed per Hour',
    vAxis: {
      title: 'Count'
    },
    hAxis: {
      title: 'Hour',
      slantedText: false,
      ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
    },
    seriesType: 'bars',
    series: {},
    trendlines: {
      0: {
        type: 'linear'
      }
    },
    isStacked: false
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);

} 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Метки: