Gestapelte Spalte Anmerkungen Google Charts

Question

Während eine gestapelte Säulendiagramm mit Google das Erstellen von Diagrammen werden die Anmerkungen überlappt zu werden aufgrund der großen Menge Daten. Gibt es sowieso, um es anzupassen? Wie nur für jede dritte Spalte anzeigen. Ich weiß, dass dieses Konzept gut mit Highcharts funktioniert, aber ich suchte nach kostenlosen Charts.

Annotation Funktionsaufruf: -

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

Grüße.

Answer 1

gibt es keine Standard-Option, aber Sie können null für leere Anmerkungen

verwenden beim Laden, versuchen die Anmerkungen für jede dritte Reihe zeigen folgende ...

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