javascript - 非零值的谷歌图表趋势线

Question

我正在为我的图表添加一条线性趋势线，它代表 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>

标签： javascriptchartsgoogle-visualization

Answer 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>