구글 차트 : "공백"의 오른쪽을 비우는 법?

Question

Google Chart를 사용하여 텍스트 설명과 함께 그래프를 만들었습니다.

첫 번째 반복에서 각 그래프 유형에 작은 "제목"을 사용했는데 잘 보였습니다. 그러나 어느 시점에서 각 그래프에 대한 총 가치를 추가했습니다 ... 그리고 텍스트가 래핑되기 시작했습니다.

질문 1 : 질문 1 : 문자 배치를 방지 할 수있는 방법이 있습니까 (차트의 오른쪽 부분 참조)?

"..."안에 텍스트를 넣으려고했지만 Google 차트는이 태그를 순수 텍스트로 변환합니다.

질문 2 : 그래프 전체를 왼쪽으로 이동하고 사용하지 않는 영역을 소비하는 방법이 있습니까? 그렇다면 오른쪽 부분에 텍스트를위한 공간이 더 많을 수 있습니까?

모든 의견을 환영합니다! 아마 나를 위해 일할 다른 해결책이 있을까요?

P. 내가 옵션에 다음 코드를 (필요에 따라 조정) 추가 그래프

<script type="text/javascript" src="/js/jquery.js"></script> 
<script type="text/javascript" src="/js/google/jsapi.js"></script> 
<script type="text/javascript"> 

    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 
    var expArray = [<%=ExperienceArray %>]; 

    function drawChart() { 
     if (expArray.length > 0) { 
      $('#chart_div').show(); 
      $('#MessagesDiv').hide(); 

      var total = 0, train = 0, match = 0, ageing = 0; 
      for (var i = 0; i < expArray.length; i++) { 
       total += expArray[i][1]; 
       train += expArray[i][2]; 
       match += expArray[i][3]; 
       ageing += expArray[i][4]; 
      } 
      var data = google.visualization.arrayToDataTable([ 
       ['№', 'Total (' + total + ')', 'Training (' + train + ')', 'Matches (' + match + ')', 'Ageing (' + ageing + ')'] 
      ].concat(expArray)); 

      var options = { 
       title: 'Gained experience', 
       allowHtml: 'true', 
       hAxis: { title: '', titleTextStyle: { color: 'black' } }, 
       colors: ['#00FF00', '#6600CC', '#0000CC', '#000000'] 
      }; 

      var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } else { 
      $('#chart_div').hide(); 
      alert("Data are absent"); 
     } 
    } 
</script> 

<div id="chart_div" style="width: 900px; height: 500px;"></div> 

Answer 1

를 표시하는 데 사용할

PPS 여기 JS 코드 : 그 스크린 샷에 지금 어떻게 보이는지 확인하시기 바랍니다 chartArea: {left: 0}

그래서 옵션 파일이 될 것입니다 :

 var options = { 
      title: 'Gained experience', 
      allowHtml: 'true', 
      hAxis: { title: '', titleTextStyle: { color: 'black' } }, 
      colors: ['#00FF00', '#6600CC', '#0000CC', '#000000'], 
      chartArea: {left: 0} 
     }; 

참고 : 현재 설정은 축 레이블 전체를 잘라 내기 때문에 0보다 큰 크기의 무언가를 사용하고 싶습니다 (알고리즘을 사용하여 무언가를 계산할 수 있습니다. 원할 때까지는 바이올린을 사용할 수 있습니다).

그러나 트릭은 없습니다.

Google이 차트 용 SVG를 만들면 범례를 두 줄 (두 개의 개별 SVG 텍스트 요소)으로 나눠서 조정하기가 쉽지 않습니다. 쉽게 고칠 수는 없습니다. 한 가지 옵션은 범례를 모방 한 범례 만 (차트 영역 없음) 별도의 차트를 만든 다음 두 차트를 함께 연결하는 것입니다 (범례와 상호 작용할 수 있도록 클릭하려는 경우).

또는 legend: {textStyle: {fontSize: 8}}을 사용하여 글꼴 크기를 줄이거 나 텍스트가 줄 바꿈되지 않도록 글꼴 크기를 줄일 수 있습니다 (다시 말하면 작동 할 때까지 알고리즘 또는 바이올린을 만들 수 있습니다).

별도의 옵션으로 수동 범례를 만들고 javascript를 사용하여 대화 형 작업을 모방 한 다음 CSS/Javascript를 사용하여 원하는대로 형식을 지정할 수 있습니다.