2014-01-24 47 views
6

我正在使用帶註釋的google api折線圖。我如何更改字體大小和字體格式?如何增加註釋的字體大小和大膽的谷歌api圖線圖中的註釋值?

<script type="text/javascript"> 
       google.load("visualization", "1", {packages: ["corechart"]}); 
       google.setOnLoadCallback(drawChart); 
       function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', ''); 
        data.addColumn({type: 'string', role: 'annotation'}); 
        data.addColumn('number', ''); 
        data.addRows([['2010', '67', 67]]); 
        data.addRows([['2011', '69', 69]]); 
        data.addRows([['2012', '68', 68]]); 
        data.addRows([['2013', '67', 67]]); 

        var options = { 
         width: 350, 
         height: 250, 
         pointSize: 5,       
         legend: {position: 'none'}, 
         chartArea: { 
          left: 0, 
          top: 60, 
          width: 300, 
          height: 75}, 
         vAxis: { 
          baselineColor: '#fff', 
          gridlines: {color: '#fff'}, 
          minValue: 64, 
          maxValue: 71 
         }, 
         tooltip: {trigger: 'none'}, 
         enableInteractivity: false, 
         annotation: { 
          1: { 
           style: 'default' 
          } 
         }, 
         series: {0: {color: '#4D7AD3'}, 1: {color: '#4D7AD3'}} 
        }; 

        var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
       } 
      </script> 
<body>     
    <h2>Line Charts</h2> 
    <div id="chart_div"></div> 
</body> 
+3

的API不支持樣式的註釋。您可以提交[功能請求](https://code.google.com/p/google-visualization-api-issues/issues/list)以添加支持。 – asgallant

回答

19

試試這個

var options = { 
annotations: { 
    textStyle: { 
    fontName: 'Times-Roman', 
    fontSize: 18, 
    bold: true, 
    italic: true, 
    color: '#871b47',  // The color of the text. 
    auraColor: '#d799ae', // The color of the text outline. 
    opacity: 0.8   // The transparency of the text. 
} 
} 
}; 

https://developers.google.com/chart/interactive/docs/gallery/linechart

+4

顏色選項似乎不起作用。基於我的測試,API根據背景的顏色自動選擇文本顏色。 (淺色背景上的淺色文字或淺色背景上的深色文字) – Jeff

+0

你可以發佈一個鏈接或示例代碼,也可以是jsfiddle – Gopal

+0

感謝您發佈該信息。要設置顏色,我必須在條註釋列本身指定樣式。令人困惑的是,該風格的字體屬性被忽略 - 所以我不得不將這個答案與我的相結合。 – Blamkin86