如何在Google图表中更改注释文本的颜色 [英] How to change color of annotation text in google-charts

问题描述

您如何更改Google Chart Tools LineChart中注释文本的颜色？

下面是一个示例

  google.load（'visualization'，'1'，{packages：['corechart']}）; 
 google.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'date'，'Date'）; 
 data.addColumn（'number'，'Sales'）; 
 data.addColumn（{id：'title'，label：'Title'，type：'string'，role：'annotation'}）; 
 data.addRows（[
 [new Date（2012，3，5），80，null]，
 [new Date（2012，3，12），120，'New Product' ]，
 [new Date（2012，3，19），80，null]，
 [new Date（2012，3，26），65，null]，
 [new Date 2012，4，2），70，null]，
]）; 
 
 var options = {
 title：'按周销售'，
 displayAnnotations：true，
 hAxis：{title：'Date'，
 titleTextStyle ：{color：'gray'}}，
 colors：['＃f07f09'] 
}; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; 
 chart.draw（data，options）; 
} 
  

我希望该行为橙色，注释文本为灰色。目前注释文本是橙色的。

解决方案

其实你可以。注释的颜色与线条颜色相同。只需在要制作注释的地方放一个点，并将点的颜色设置为所需的注释颜色即可。

 数据。 addColumn（{type：'string'，role：'style'}）; 
 data.addColumn（{type：'string'，role：'annotation'}）; 
  

然后当您添加数据时

 'point {size：14;形状：圆形;填充颜​​色：＃63A74A'，'您的注释'
  

请参阅
http://www.marketvolume.com/stocks/stochasticsmomentumindex .asp？s = SPY& t = spdr-sp-500

How do you change the color of an annotation text in Google Chart Tools LineChart ?

Here is an example

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();      
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'});
    data.addRows([
        [new Date(2012, 3, 5), 80, null],
        [new Date(2012, 3, 12), 120, 'New Product'],
        [new Date(2012, 3, 19), 80, null],
        [new Date(2012, 3, 26), 65, null],
        [new Date(2012, 4, 2), 70, null],
    ]);

    var options = {
        title: 'Sales by Week',
        displayAnnotations: true,
        hAxis: {title: 'Date', 
                titleTextStyle: {color: 'grey'}},
        colors: ['#f07f09']
      };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);      
}

I want the line to be orange and the annotation text in grey. Currently the annotation text is orange.

解决方案

Actually you can. Color of the annotations is the same as line color. Just put a dot in the place you want to make an annotation and set a dot's color to the desirable annotation color.

data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role:'annotation'});

and then when you add data

'point { size: 14; shape-type: circle; fill-color: #63A74A','Your annotation'

See example at http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

这篇关于如何在Google图表中更改注释文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！