Google Charts légendes chevauchant

Question

Je suis nouveau sur Stackoverflow et google charts.

Je suis confronté à un problème dans un de mes projets qui utilise google charts api, je dessine deux légendes mais elles se chevauchent en avant-première.

J'ai essayé différentes solutions sur stackoverflow et jsfiddle mais aucune d'entre elles n'a fonctionné.

Voici quelques-uns de mon extrait de code et de sortie:

Objet de configuration graphique:

var options = { 
     hAxis : { 
      title : xAxis, 
      textStyle:{ 
       color: 'black', 
       fontSize : '8px' 
      }, 
      slantedText : true, 
      slantedTextAngle : 90, 
      titleTextStyle : { 
       fontSize : '15px', 
       italic : false 
      }, 
     }, 
     vAxis : { 
      title : yAxis, 
      format:format, 
      textStyle:{ 
       color: 'black', 
       fontSize : '8px' 
      }, 
      titleTextStyle : { 
       fontSize : '15px', 
       italic : false 
      }, 
      viewWindowMode : 'explicit', 
      viewWindow : { 
       min : 0, 
       //max: 1200000 
      } 
     }, 
     backgroundColor : 'transparent', 
     interpolateNulls: false, 
     width : 350, 
     height : 180, 
     chartArea : { 
      left : 40, 
      width : '45%', 
      height : '45%' 
     }, 
    legend: { 
      position: 'top', 
      maxLines: 3, 
     }, 
     series : { 
      0 : { 
       color : line1Color, 
       visibleInLegend : true, 
       pointShape: 'square', 
       pointSize: 10, 
      }, 
      1 : { 
       color : line2Color, 
       visibleInLegend : true, 
       pointShape: 'diamond', 
       pointSize: 10, 
      } 
     } 
    }; 

Sortie: https://snag.gy/Yd2qjX.jpg

Answer 1

malheureusement, il n'y a pas une option pour forcer plusieurs lignes sur la légende

Je ne pourrais jamais obtenir les légendes se chevauchent comme dans la capture d'écran,
au lieu que chacun serait coupure, avec « ... » à la fin

mais la seule façon que je pouvais obtenir le texte de légende déposer sur une autre ligne et non coupure,
était en augmentant la width par un amout rediculous
nécessaire pour ajuster chartArea.width ainsi

afin que vous pourriez être en mesure de continuer à ajuster à la fois width et chartArea.width,
jusqu'à ce que vous obtenez le résultat souhaité

un autre note, chaque fois que vous utilisez fontSize dans le tableau options,
il doit être un nombre, au lieu d'une chaîne, à savoir
fontSize : 8

contre

fontSize : '8px'

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'], 
 
     [new Date('08/01/2015'), 0.2, 0.0], 
 
     [new Date('09/01/2015'), 0.8, 0.0], 
 
     [new Date('10/01/2015'), 1.0, 2.2], 
 
     [new Date('11/01/2015'), 1.3, 1.2], 
 
     [new Date('12/01/2015'), 1.8, 1.4], 
 
     [new Date('01/01/2016'), 2.4, 1.5], 
 
     [new Date('02/01/2016'), 2.5, 1.4], 
 
     [new Date('03/01/2016'), 2.6, 1.5], 
 
     [new Date('04/01/2016'), 2.5, 1.5], 
 
     [new Date('05/01/2016'), 2.4, 1.6], 
 
     [new Date('06/01/2016'), 2.3, 1.6], 
 
     [new Date('07/01/2016'), 2.2, 1.5] 
 
    ]); 
 

 
    var options = { 
 
     hAxis : { 
 
      title : 'xAxis', 
 
      format: 'MMM-yy', 
 
      textStyle:{ 
 
       color: 'black', 
 
       fontSize : 8 
 
      }, 
 
      slantedText : true, 
 
      slantedTextAngle : 90, 
 
      titleTextStyle : { 
 
       fontSize : 15, 
 
       italic : false 
 
      }, 
 
     }, 
 
     vAxis : { 
 
      title : 'yAxis', 
 
      format: '#,##0.0', 
 
      textStyle:{ 
 
       color: 'black', 
 
       fontSize : 8 
 
      }, 
 
      titleTextStyle : { 
 
       fontSize : 15, 
 
       italic : false 
 
      }, 
 
      viewWindowMode : 'explicit', 
 
      viewWindow : { 
 
       min : 0 
 
      } 
 
     }, 
 
     backgroundColor : 'transparent', 
 
     interpolateNulls: false, 
 
     width : 780, 
 
     height : 180, 
 
     chartArea : { 
 
      left : 40, 
 
      width : 310, 
 
      height : '45%' 
 
     }, 
 
     legend: { 
 
      position: 'top', 
 
      maxLines: 3 
 
     }, 
 
     series : { 
 
      0 : { 
 
       color : '#154360', 
 
       visibleInLegend : true, 
 
       pointShape: 'square', 
 
       pointSize: 10, 
 
      }, 
 
      1 : { 
 
       color : '#5499C7', 
 
       visibleInLegend : true, 
 
       pointShape: 'diamond', 
 
       pointSize: 10, 
 
      } 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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