web-dev-qa-db-fra.com

Comment ajouter une ligne cible dans le graphique à colonnes Google?

Comment ajouter la ligne cible dans le graphique à colonnes Google comme ceci.

google column chart

google-visualization
26
Sivanath

Si vous souhaitez combiner le graphique à colonnes et le graphique linéaire, utilisez ComboChart. La documentation et les exemples sont ici: https://developers.google.com/chart/interactive/docs/gallery/combochart

fondamentalement, ayez le point de données pour le graphique en courbes comme l'une des colonnes du DataTable et spécifiez cette colonne comme étant la "série" = "ligne", tandis que les autres colonnes sont visualisées dans un ColumnChart.

20
user1447121

Vous pouvez utiliser une série Zone étagée pour y parvenir. C'est un peu gênant mais ça marche bien.

var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''],
    ['2004/05',  165,      938,         522,             998,           450,      250],
    ['2005/06',  135,      1120,        599,             1268,          288,      250],
    ['2006/07',  157,      1167,        587,             807,           397,      250],
    ['2007/08',  139,      1110,        615,             968,           215,      250],
    ['2008/09',  136,      691,         629,             1026,          366,      250]
]);

var options = {
    seriesType: "line",
    series: {5: {
      type: "steppedArea", 
      color: '#FF0000', 
      visibleInLegend: false, 
      areaOpacity: 0}
    }
};

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

Horizontal target line on Google Chart

Exemple

Exemple de graphique Google de zone étagée

4
Ryan

Pour rendre le steppedArea @Ryan suggéré ci-dessus un peu moins gênant, vous pouvez configurer un deuxième axe (à droite) et définir la ligne de base à la valeur souhaitée pour la ligne cible. Le deuxième axe sera configuré pour les données seppedArea. Cela évite l'effet de contour laid lorsque vous passez le pointeur sur le graphique et sous la ligne. Faites quelque chose comme ça dans les options:

var options = {
    seriesType: "line",
    series: {5: {
        type: "steppedArea", 
        color: '#FF0000', 
        visibleInLegend: false, 
        areaOpacity: 0,
        targetAxisIndex: 1 } //tell the series values to be shown in axe 1 bellow
    },
    vAxes: [  //each object in this array refers to one axe setup
        {},  //axe 0 without any special configurations
        {
            ticks: [250], //use this if you want to show the target value
            baseline: 250 //this shifts the base line to 250
        }
    ]
};
2
jpavel

Pour éviter le contour laid, utilisez simplement: enableInteractivity: false

2
Tuur