Как добавить целевую строку в диаграмме столбцов google?

Ответ 1

Если вы хотите совместить колонку и строку, используйте ComboChart. Документация и примеры приведены здесь: https://code.google.com/apis/ajax/playground/?type=visualization#combo_chart

в основном, укажите точку данных для линейной диаграммы как один из столбцов в DataTable и укажите этот столбец как "series" = "line", тогда как другие столбцы визуализируются в столбце ColumnChart.

Ответ 2

Для достижения этой цели вы можете использовать Stepped Area. Это немного неудобно, но хорошо работает.

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);

Пример

Пример диаграммы Google Шаг

Ответ 3

Чтобы избежать уродливого контура, просто используйте: enableInteractivity: false

Ответ 4

Чтобы сделать steppedArea @Ryan, предложенный выше, чуть менее неудобным, вы можете настроить вторую (правую) ось и установить базовую линию на значение, которое вы хотите для целевой линии. Вторая ось будет настроена для данных seppedArea. Это позволяет избежать негативного контурного эффекта, когда вы наводите указатель на график и под линию. Сделайте что-то подобное в настройках:

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
        }
    ]
};