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

中

材料图表 - ＆gt; packages: ['bar'] - google.charts.Bar

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

核心图表 - ＆gt; packages: ['corechart'] - google.visualization.ColumnChart

您可以使用以下配置选项将图表关闭添加到外观＆amp;感觉材料

theme: 'material'

2。 trendlines.*处理核心图表，必须建立在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>

是否可以在Google Barchart上添加趋势线？

1 个答案: