Comment ajouter la ligne cible dans le graphique colonne google?

Comment ajouter la ligne cible dans google colonne de tableau comme ci-dessous.

Comment ajouter la ligne cible dans le graphique colonne google?

source d'informationauteur Sivanath

  1. 16

    Si vous souhaitez combiner les columnchart et graphique en courbes, utiliser ComboChart. La Documentation et les exemples sont ici :
    https://code.google.com/apis/ajax/playground/?type=visualization#combo_chart

    fondamentalement, avoir le point de données pour le graphique sous la forme de l'une des colonnes dans la Table de données, et définir cette colonne à la "série" = "ligne", alors que les autres colonnes sont visualisées dans un ColumnChart.

  2. 3

    Vous pouvez utiliser un Intervenu Zone série pour atteindre cet objectif. C'est un peu maladroit, mais fonctionne 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);

    Comment ajouter la ligne cible dans le graphique colonne google?

    Exemple

    Intervenu Zone De Google Exemple De Diagramme

  3. 2

    Pour éviter le vilain contour, il suffit d'utiliser: enableInteractivity: false

  4. 2

    Pour faire de la steppedArea @Ryan suggéré ci-dessus, un petit peu moins difficile, vous pouvez configurer un deuxième (à droite) de l'axe et de définir la ligne de base à la valeur que vous souhaitez pour la ligne cible. Le deuxième axe sera l'installation de la seppedArea de données. Cela évite le uggly effet de contour lorsque vous passez le pointeur de la souris sur le graphique et en vertu de la ligne. Faire quelque chose comme cela 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
        }
    ]
};