javascript – 如何在google api图表的折线图中增加注释字体大小和粗体注释值?

前端之家收集整理的这篇文章主要介绍了javascript – 如何在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]]);

                    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>

解决方法

试试这个
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

原文链接:https://www.f2er.com/js/156557.html

猜你在找的JavaScript相关文章