구글 차트 API 글꼴 변경

나는 기본적으로 내 자신의 스크립트가 정적 데이터를 사용하여이 일을 수정하고 구글 시트를 조회하는 대신 차트를 구축 개발 :구글 차트 API 글꼴 변경

이 참조 링크가 꽤 같은 수행합니다 http://bl.ocks.org/battlehorse/1122276

나는 옵션 의 backgroundColor하지만 난 정말하지 않는 것은 글꼴 색상을 변경하는 추가 각 차트에 대해 다른 배경 색상을 설정할 수 있어요. 예를 들어 배경을 검정색으로 만들면 텍스트를 흰색으로 표시 할 방법이 없습니다.

<html><head> 
<title>Portal Counts</title> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="portalCount_test2.js"></script> 
<script> 
google.load('visualization', '1.1', {'packages':['controls','linechart']}); 
    google.setOnLoadCallback(initialize); 

function initialize() { 
    var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8'); 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString); 
    query.send(drawDashboard); 
} 
function drawDashboard(response) { 
    var data = response.getDataTable(); 

    var filterPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
    'containerId': 'filter1_div', 
    'options': { 
     'filterColumnLabel': 'LinearOptimizationSheet', 
     'fontcolor': '#ffffff', 
     'ui': { 
     'labelStacking': 'vertical', 
     'allowTyping': false, 
     'allowMultiple': false  
     } 
    } 
    }); 

    var testChart = new google.visualization.ChartWrapper({ 
    'chartType': 'LineChart', 
    'containerId': 'chart1_div', 
    'options': { 
     'title': 'Test Chart', 
     'height': 400, 
     'backgroundColor': '#000000', 
     'colors': ['#00c2ff', '#28f428'], 
     }, 
    }); 

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div')); 
    dashboard.bind(filterPicker, testChart); 
    dashboard.draw(data); 

    } 
    </script> 
</head> 
<body bgcolor="#000000"> 
    <div align="center"> 
     <div id="dashboard1_div"> 
     <div id="filter1_div"></div> 
     <div id="filter2_div"></div>  
     <div id="chart1_div" style="width:100%;"></div> 
     </div> 
</div> 
    </div> 
</body> 
</html>

나는 여기와 웹상에서 성공을 찾지 못한 모든 해결책을 시도했습니다. 어쩌면 사람들이 도울 수 있습니다. 미리 감사드립니다.

출처

2017-12-14 Guy Grand

나는 색, 텍스트 또는 차트 라인을 변경하려는 차트의 어떤 요소를 혼란스러워하니? –

텍스트는 내가 관리 할 수없는 차트 요소입니다. 차트 선과 차트 배경이 옵션에서 수정되었습니다. 나는 당신의 스 니펫을보고 최대한 피드백을 줄 것이다. 감사합니다 –

<html><head> 
<title>Portal Counts</title> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script> 
google.charts.load('current', {'packages':['corechart', 'controls']}); 
google.charts.setOnLoadCallback(initialize); 

function initialize() { 
    var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8'); 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString); 
    query.send(drawDashboard); 
} 
function drawDashboard(response) { 
    var data = response.getDataTable(); 

    var filterPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
    'containerId': 'filter1_div', 
    'options': { 
     'filterColumnLabel': 'LinearOptimizationSheet', 
     'fontcolor': '#ffffff', 
     'ui': { 
     'labelStacking': 'vertical', 
     'allowTyping': false, 
     'allowMultiple': false  
     } 
    } 
    }); 

    var testChart = new google.visualization.ChartWrapper({ 
    'chartType': 'LineChart', 
    'containerId': 'chart1_div', 
    'options': 
    { 
     'title': 'Test Chart', 
     'height': 400, 
     'backgroundColor': '#000000', 
     'colors': ['#00c2ff', '#28f428'], 
     titleTextStyle: 
     { 
      color: '#FFFFFF' 
     }, 
     hAxis: 
     { 
      textStyle: 
      { 
       color: '#FFFFFF' 
      }, 
      titleTextStyle: 
      { 
       color: '#FFFFFF' 
      } 
     }, 
     vAxis: { 
      textStyle: 
      { 
       color: '#FFFFFF' 
      }, 
      titleTextStyle: 
      { 
       color: '#FFFFFF' 
      } 
     }, 
     legend: 
     { 
      textStyle: 
      { 
       color: '#FFFFFF' 
      } 
     } 
    } 
}); 

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div')); 
    dashboard.bind(filterPicker, testChart); 
    dashboard.draw(data); 
} 
    </script> 
</head> 
<body bgcolor="#000000"> 
    <div align="center"> 
     <div id="dashboard1_div"> 
     <div id="filter1_div"></div> 
     <div id="filter2_div"></div>  
     <div id="chart1_div" style="width:100%;"></div> 
     </div> 
</div> 
    </div> 
</body> 
</html>

사용 차트 라인 시리즈. 자세한 내용 https://developers.google.com/chart/interactive/docs/lines

사용 haxis는 백 시즈 링크, 범례 들여다 TEXTSTYLE 측 텍스트 (Google Visualization API font color)

다른 극단적 인 방법 들면 F12을 사용하여 수동으로 값을 요소 특성 변화 & titleTextStyle 예 :. : - 내가 삭제 한 내 예를하고 리팩토링 후 코드를 게시 $ ('경로') ATTR ('뇌졸중', '파랑')

UPDATE 컬러 라인을 변경합니다. 그것을 확인하십시오

출처

2017-12-14 17:32:20

불행히도 나는 아직도 그것을 얻을 수 없습니다. 나는 그것을 명확하게하기 위해 전체 작업 html/js 코드로 포스트를 업데이트했다. 질문은 /입니다 : 차트의 텍스트 색을 어떻게 바꿀 수 있습니까? 감사합니다 –

정확히 어떤 요소를 명확히 할 수 있습니까? 아마도 차트 그리드를 의미할까요? 아니면 옥수수 덩어리, 파운드 케이크, 우유 라인일까요? –

제목과 haxis 텍스트와 같은 차트의 모든 텍스트 요소를 의미합니다. 첫 번째 게시물 (업데이트 된)에서 위의 샘플 코드를 실행하면 텍스트 요소가 모두 검은 색이기 때문에 아무 것도 읽을 수없는 차트가있는 검은 색 페이지가 표시됩니다. 감사합니다 –

답변

관련 문제