如何在google api图表的折线图中增加注释字体大小并加粗注释值？答案

【问题标题】：How to increase annotation font size and bold the annotation value in line chart of google api chart?如何在google api图表的折线图中增加注释字体大小并加粗注释值？
【发布时间】：2014-01-24 06:04:41
【问题描述】：

我正在使用带有注释的 google 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>

【问题讨论】：

API 不支持注释样式。您可以提交feature request 以添加支持。

标签： javascript google-api google-visualization

【解决方案1】：

试试这个

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

【讨论】：

颜色选项似乎不起作用。根据我的测试，API 会根据背景颜色自动选择文本颜色。（深色背景上的浅色文字或浅色背景上的深色文字）
你能发个链接或示例代码或者可能是jsfiddle
感谢发布。要设置颜色，我必须在条形注释列本身上指定一种样式。非常令人困惑的是，该样式的字体属性被忽略了 - 所以我不得不将这个答案与我的结合起来。
有什么办法可以在那里工作？比如top + 10 之类的？