javascript - 是否可以在 Google 条形图上放置趋势线？

Question

我正在尝试在条形图上放置趋势线。当我将趋势线添加到选项时，没有出现趋势线。有没有办法在这样的条形图上制作趋势线？

<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2014', 1000, 400],
      ['2015', 1170, 460],
      ['2016', 660, 1120],
      ['2017', 1030, 540]
    ]);

    var options = {
    trendlines: {
        0: {
            color: 'green',
        visibleInLegend: true,
        }
    },
      chart: {
        title: 'Last 7 Days',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'vertical',
      vAxis: {format: 'decimal'},
      height: 400,
      colors: ['#1b9e77', '#d95f02', '#7570b3']
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));


  }
</script>

Answer 1

1. trendlines.* 列在 the several options that don't work on Material charts 中

Material 图表 --> packages: ['bar'] -- google.charts.Bar

但是，有一种方法可以在条形图上制作趋势线，使用...

Core 图表 --> packages: ['corechart'] -- google.visualization.ColumnChart

您可以使用以下配置选项使图表接近 Material 的外观和感觉

主题:'material'

2. trendlines.* 要在 Core 图表上工作，它必须建立在 Continuous axis 上

意思是轴值不能是字符串

请参阅以下工作片段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    [new Date(2014, 0, 1), 1000, 400],
    [new Date(2015, 0, 1), 1170, 460],
    [new Date(2016, 0, 1), 660, 1120],
    [new Date(2017, 0, 1), 1030, 540]
  ]);

  var options = {
    colors: ['#1b9e77', '#d95f02'],
    hAxis: {
      format: 'yyyy',
      ticks: [new Date(2014, 0, 1), new Date(2015, 0, 1), new Date(2016, 0, 1), new Date(2017, 0, 1)]
    },
    height: 400,
    theme: 'material',
    title: 'Last 7 Days',
    trendlines: {
      0: {
        color: 'green',
        visibleInLegend: true
      }
    },
    vAxis: {
      format: 'decimal'
    }
  };

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

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