堆积列注释谷歌图表

Question

使用谷歌图表创建堆积柱形图时，由于数据量大，注释会重叠。有没有办法调整一下。就像只显示每第三列一样。我知道这个概念适用于 highcharts，但我一直在寻找免费图表。

注解函数调用是：--

    function drawVisualization() {
    var json;
    $.getJSON('end.json', function (json) {

    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Time');
        data.addColumn('number', 'Run 3');
        data.addColumn({ type: 'number', role: 'annotation' });
        data.addColumn('number', 'Run 2');
        data.addColumn({ type: 'number', role: 'annotation' });
        data.addColumn('number', 'Run 1');
        data.addColumn({ type: 'number', role: 'annotation' });
        for (var i = 0; i< json[0].data.length; i++){
            data.addRow([json[0].data[i], json[3].data[i],json[3].data[i],json[2].data[i],json[2].data[i],json[1].data[i], json[1].data[i]]);
        }


 var options = {
 title: "End to End Processing",
 tooltip: {isHtml: true},
 legend:{position:"right"},
 isStacked:true,
 height:window.innerHeight,
 width: window.innerWidth,
 bar: {groupWidth: '3'},

 focusTarget: 'category',
 vAxis: {
        viewWindowMode:'explicit',
            viewWindow: {
                    max:60,
                    min:0
            },
            gridlines :{count:6},
            title:'Time in mins',
            format: 'short' 
        },
    hAxis: {
            format: 'd/m/y', 
            textStyle : {
            fontSize: 9  
            },
            slantedText: true, 
            slantedTextAngle: 270
    },
    annotations: {
            textStyle: {
                color: 'black',
                fontSize: 11,
                fontStyle: 'bold'
                },
             stemLength: 20,
            displayAnnotationsFilter: true,
            legendPosition: 'newRow'
    },
     series: {
        0:{color:'lightgreen'},
        1:{color:'black'},
        2:{color:'#1E90FF',},
        3:{ type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}
    }
}

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

$(window).resize(function(){
drawVisualization();
});
} 

问候。

Answer 1

没有标准选项，但您可以使用null 进行空白注释

加载时，请尝试以下操作以显示每三行的注释...

    for (var i = 0; i< json[0].data.length; i++){
        var annotation1 = null;
        var annotation2 = null;
        var annotation3 = null;
        if ((i % 3) === 0) {
          var annotation3 = json[3].data[i];
          var annotation2 = json[2].data[i];
          var annotation1 = json[1].data[i];
        }
        data.addRow([
          json[0].data[i],
          json[3].data[i],
          annotation3,
          json[2].data[i],
          annotation2,
          json[1].data[i],
          annotation1
        ]);
    }