Google Charts - Общий ярлык для смежных столбцов с тем же значением

Question

У меня есть диаграммы Google, показы повторяющихся значений для смежных строк, содержащих одинаковое значение. Есть ли способ сделать соседние столбцы совместно использовать метку, если значение, которое они представляют, одинаково?

Answer 1

нет стандартных вариантов, чтобы предотвратить аннотации от повторения,
, но они могут быть легко удалены

---

1)

, если значения аннотации загружаются в качестве части данных,
и вы не хотите изменять способ загрузки данных

используйте простую процедуру для т аннотации к null

см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Month', 'Members', {role: 'annotation'}], 
 
    ['2015-09', 0, '0'], 
 
    ['2015-10', 0, '0'], 
 
    ['2015-11', 0, '0'], 
 
    ['2015-12', 0, '0'], 
 
    ['2016-01', 1, '1'], 
 
    ['2016-02', 1, '1'], 
 
    ['2016-03', 1, '1'], 
 
    ['2015-04', 3, '3'], 
 
    ['2016-05', 3, '3'], 
 
    ['2016-06', 3, '3'], 
 
    ['2016-07', 3, '3'], 
 
    ['2016-08', 3, '3'], 
 
    ['2016-09', 3, '3'], 
 
    ['2016-10', 4, '4'], 
 
    ['2016-11', 6, '6'], 
 
    ['2016-12', 6, '6'], 
 
    ['2017-01', 8, '8'], 
 
    ['2017-02', 8, '8'], 
 
    ['2017-03', 8, '8'], 
 
    ]); 
 

 
    // remove repeated annotations 
 
    var annotationText = null; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    if (annotationText === data.getValue(i, 2)) { 
 
     data.setValue(i, 2, null); 
 
    } else { 
 
     annotationText = data.getValue(i, 2); 
 
    } 
 
    } 
 

 
    var options = { 
 
    annotations: { 
 
     alwaysOutside: true, 
 
     textStyle: { 
 
     bold: true, 
 
     fontSize: 20 
 
     } 
 
    }, 
 
    colors: ['#0097A7'], 
 
    hAxis: { 
 
     slantedText: true, 
 
     textStyle: { 
 
     bold: true, 
 
     fontSize: 16 
 
     } 
 
    }, 
 
    height: 400, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    vAxis: { 
 
     title: data.getColumnLabel(1) 
 
    } 
 
    }; 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

---

2)

, если значения аннотаций устанавливаются с помощью DataView,
mo dify функцию calc не повторять аннотаций

см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Month', 'Members'], 
 
    ['2015-09', 0], 
 
    ['2015-10', 0], 
 
    ['2015-11', 0], 
 
    ['2015-12', 0], 
 
    ['2016-01', 1], 
 
    ['2016-02', 1], 
 
    ['2016-03', 1], 
 
    ['2015-04', 3], 
 
    ['2016-05', 3], 
 
    ['2016-06', 3], 
 
    ['2016-07', 3], 
 
    ['2016-08', 3], 
 
    ['2016-09', 3], 
 
    ['2016-10', 4], 
 
    ['2016-11', 6], 
 
    ['2016-12', 6], 
 
    ['2017-01', 8], 
 
    ['2017-02', 8], 
 
    ['2017-03', 8], 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: function (dt, row) { 
 
     if (row > 0) { 
 
     if (dt.getValue(row, 1) === dt.getValue(row - 1, 1)) { 
 
      return null; 
 
     } 
 
     } 
 
     return dt.getFormattedValue(row, 1); 
 
    }, 
 
    role: 'annotation', 
 
    type: 'string' 
 
    }]); 
 

 
    var options = { 
 
    annotations: { 
 
     alwaysOutside: true, 
 
     textStyle: { 
 
     bold: true, 
 
     fontSize: 20 
 
     } 
 
    }, 
 
    colors: ['#0097A7'], 
 
    hAxis: { 
 
     slantedText: true, 
 
     textStyle: { 
 
     bold: true, 
 
     fontSize: 16 
 
     } 
 
    }, 
 
    height: 400, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    vAxis: { 
 
     title: data.getColumnLabel(1) 
 
    } 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(view, options); 
 
};

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>