Google Charts傳說重疊

Question

我是新來的Stackoverflow和谷歌圖表。

我在使用google圖表API的項目中遇到了一個問題，我正在繪製兩個圖例，但它們在預覽時重疊。

我在stackoverflow和jsfiddle上嘗試過各種解決方案，但都沒有工作。

下面是一些我的代碼段，並輸出：

配置對象圖：

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, 
      } 
     } 
    }; 

輸出： https://snag.gy/Yd2qjX.jpg

Answer 1

不幸的是，不是一種選擇用於強制圖例上的多行

我永遠無法得到的傳說，如截屏重疊，
而不是每個會截止，與「...」末

但只有這樣我能得到傳說文本下降到另一條線路，而不是截止，
是通過調整chartArea.width以及

需要一個荒謬的大寫金額
增加width所以你可能能夠繼續同時調整width和chartArea.width，
，直到你得到想要的結果

另一個音符，任何時候你在圖表options在使用fontSize，
應該的，而不是一個一個串號，即
fontSize : 8

與

fontSize : '8px'

看到下面的工作片段...

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>