Est-il possible de mettre une ligne de tendance sur un Google Barchart?

Question

J'essaie de mettre une ligne de tendance sur un graphique à barres. Lorsque j'ajoute la courbe de tendance aux options, aucune ligne de tendance n'apparaît. Est-il possible de faire une ligne de tendance sur un graphique comme celui-ci?

<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.* figurent parmi the several options that don't work on Material charts

Matériel Tableau ->packages: ['bar'] - google.charts.Bar

cependant il y a un moyen de faire une courbe de tendance sur un barchart , en utilisant ...

de base Tableau ->packages: ['corechart'] - google.visualization.ColumnChart

vous pouvez utiliser l'option de configuration suivante pour obtenir le tableau près à l'aspect & sensation de Matériel

theme: 'material'

2. pour trendlines.* pour travailler sur un Core graphique, il doit être construit sur un Continuous axis

signifie que les valeurs de l'axe ne peut pas être des chaînes

voir ci-dessous extrait de travail ...

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>