谷歌圖表 - 對於相鄰列共享標籤具有相同值的

Question

我有一個谷歌圖即，顯示的是包含相同值的相鄰行重複的值。如果它們代表的值相同，是否有辦法讓相鄰列共享一個標籤？

Answer 1

沒有規範的選項，以防止註解從重複，
但這些可能是容易地去除

---

1）

如果註釋值被加載作爲數據的一部分，
而且您不想更改數據的加載方式

使用簡單的例程se t爲註釋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>