如何配置Google Chart使线性趋势线仅对非零有效值进行计算

解决方法 #

Google Charts的线性趋势线默认会自动跳过值为null的行，仅对存在有效数值的样本做回归计算，同时不会影响你X轴24小时完整刻度的展示。你只需要把无效时段的0值替换为null即可。

修改后的完整代码

JS代码部分：

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

function drawVisualization() {
  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);
}

HTML部分保持不变即可：

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

原问题原因说明

你之前的代码中将无效时段的值设为0，0属于合法数值，会被纳入趋势线的线性回归计算，大量低数值的0样本拉低了整体回归斜率，才会出现和预期不符的负趋势。替换为null后，这些行只会保留X轴的占位，不会参与趋势线计算，最终得到的就是仅针对7-10点有效数据的正趋势线。

内容的提问来源于stack exchange，提问作者cmill