如何更改谷歌图表中注释文本的颜色答案

【问题标题】：How to change color of annotation text in google-charts如何更改谷歌图表中注释文本的颜色
【发布时间】：2013-03-03 11:46:18
【问题描述】：

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

这是一个例子

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);      
}

我希望线条为橙色，注释文本为灰色。当前注释文本为橙色。

【问题讨论】：

寻找我最近的答案。 Google Charts 有许多版本，并且多年来不断发展

标签： google-visualization

【解决方案1】：

不需要额外的样式数据列和管道代码来为每一行填充丑陋的（甚至上面不完整的）格式化字符串。如果您想为不同的数据点使用不同的注释颜色，请仅使用单独的样式列。

有全局设置，在https://developers.google.com/chart/interactive/docs/gallery/linechart中搜索annotations.textStyle

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

这是您案例的概念代码（注意不同的初始化google.charts，非常重要）：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', { 'packages': ['corechart', 'line', 'bar'] });
google.charts.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 = {
    chart: {
      title: 'Sales by Week'
    },
    hAxis: {
      title: 'Date', 
      titleTextStyle: {color: 'grey'}
    },
    annotations: {
      textStyle: {
        color: 'grey',
      }
    }
    colors: ['#f07f09']
  };

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

}

您还可以更改注释的其他文本格式，如粗体、斜体、字体类型等。以下是大部分文本配置为粗体的示例：

                var options = {
                  chart: {
                   title: title
                  },
                  hAxis: {
                    textStyle: {
                      bold: true
                    }
                  },
                  vAxis: {
                    format: 'decimal',
                    textStyle: {
                      bold: true
                    }
                  },
                  legendTextStyle: {
                    bold: true
                  },
                  titleTextStyle: {
                    bold: true
                  },
                  width: chart_width,
                  //theme: 'material',  // material theme decreases the color contrast and sets the black color items (all text) to 171,171,171 grey -> washed out
                  annotations: {
                    alwaysOutside: true,
                    highContrast: true,  // default is true, but be sure
                    textStyle: {
                      bold: true
                    }
                  }
                };

更多示例与源代码链接：https://mrcsabatoth.github.io/GoogleChartsTalk/

【讨论】：

【解决方案2】：

其实你可以。注释的颜色与线条颜色相同。只需在要进行注释的位置放置一个点，然后将点的颜色设置为所需的注释颜色即可。

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

然后当你添加数据时

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

参见示例 http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

【讨论】：

谢谢你的作品，使用我给这个小提琴的例子显示了一条带有灰色注释的橙色线 - jsfiddle.net/cabbagetreecustard/ggbc00vw/1
一年过去了，您可以使用图表选项轻松做到这一点吗，annotations.textStyle.color
为什么字符串中没有关闭}？即使在jsfiddle中。它戳我的眼睛
viktor-ka , @david-yell 同样如何动态更改线条颜色。我的风格行不通。 jsfiddle.net/abelkbil/mprxas23

【解决方案3】：

如果您的注释不是“感人”，即。您要注释的点不相邻，您可以添加第二行并将注释添加到该行。

在下面的 JSON 示例中，我有一个日期和一个“总余额”，以及一个“Ann”行。

"cols":[
      {
         "id":"date",
         "label":"date",
         "type":"date",
         "p":{
            "role":"domain"
         }
      },
      {
         "id":"total-balance",
         "label":"Total balance",
         "type":"number",
         "p":{
            "role":"data"
         }
      },
      {
         "id":"ann",
         "label":"Ann",
         "type":"number",
         "p":{
            "role":"data"
         }
      },
      {
         "type":"string",
         "p":{
            "role":"annotation"
         }
      },
      {
         "type":"string",
         "p":{
            "role":"annotationText"
         }
      }
   ],

注释位于“Ann”列之后，因此将添加到“Ann”数据点中。

在我的 JSON 中，日期和“总余额”总是填写。“安”和注释通常是空的：

  "rows":[
  {
     "c":[
        {
           "v":"Date(2013, 0, 1)"
        },
        {
           "v":1000
        },
        {
           "v":null
        },
        {
           "v":null
        },
        {
           "v":null
        }
     ]
  },
  {
     "c":[
        {
           "v":"Date(2013, 0, 8)"
        },
        {
           "v":1001
        },
        {
           "v":null
        },
        {
           "v":null
        },
        {
           "v":null
        }
     ]
  },

当我需要注解时，“Ann”单元格获取与总余额相同的值，并添加注解：

{
     "c":[
        {
           "v":"Date(2013, 1, 26)"
        },
        {
           "v":2000
        },
        {
           "v":2000
        },
        {
           "v":"Something!"
        },
        {
           "v":"Something happened here!"
        }
     ]
  },

在您的 GChart 配置中，您现在可以设置两种颜色。一个用于正常线，一个用于“安”。

colors: ['black','red']

如果您没有“接触”注释，GCharts 将不会在它们之间画一条线，并且这些点将保持“不可见”，而注释会显示在正确的位置。

【讨论】：

【解决方案4】：

简短回答：不，您不能通过标准选项更改文本颜色（您可以编写一些内容以在 SVG 中找到该文本并使用 javascript 更改其颜色，但这超出了我的水平）。

您可以在 Google Groups here 上看到 ASGallant 的回答，以及他的示例 here。

// code borrowed from Google visualization API playground, slightly modified here

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

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'annotationText'});
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    data.addColumn('number', 'Blanket 2');
    data.addRow(["A", null, null, 1, 1, 0.5]);
    data.addRow(["B", null, null, 2, 0.5, 1]);
    data.addRow(["C", null, null, 4, 1, 0.5]);
    data.addRow(["D", null, null, 8, 0.5, 1]);
    data.addRow(["E", 'foo', 'foo text', 7, 1, 0.5]);
    data.addRow(["F", null, null, 7, 0.5, 1]);
    data.addRow(["G", null, null, 8, 1, 0.5]);
    data.addRow(["H", null, null, 4, 0.5, 1]);
    data.addRow(["I", null, null, 2, 1, 0.5]);
    data.addRow(["J", null, null, 3.5, 0.5, 1]);
    data.addRow(["K", null, null, 3, 1, 0.5]);
    data.addRow(["L", null, null, 3.5, 0.5, 1]);
    data.addRow(["M", null, null, 1, 1, 0.5]);
    data.addRow(["N", null, null, 1, 0.5, 1]);

    // Create and draw the visualization.
    var chart = new google.visualization.LineChart(document.getElementById('visualization'));
    chart.draw(data, {
        annotation: {
            1: {
                style: 'line'
            }
        },
        curveType: "function",
        width: 500,
        height: 400,
        vAxis: {
            maxValue: 10
        }
    });
}

你能做的最好的就是改变线条的样式，但看起来你目前不能改变线条的颜色。

【讨论】：

【解决方案5】：

是否使用 'style' 选项对其进行了更新，其中可以添加一个新列 {"type":"string","role":"style"} 并且在每一行中我们都会有 {"v":"点{大小：4；填充颜色：#3366cc；}"}？这允许注释与点/标记具有相同的颜色（可以为每个点更改），但不允许它是粗体的。要尝试的数据示例之一是，

var data =new google.visualization.DataTable(
{
"cols":[
{"label":"Log GDP Per-Capita ","type":"number"},
{"label":"New Chart",
"type":"number"},
{"type":"string","role":"annotation"},
{"type":"string","role":"style"}
],
"rows":[
{"c":[{"v":10.21932},{"v":12.3199676},{"v":"ABW"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.68416},{"v":8.4347518},{"v":"ARE"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":9.634226},{"v":12.0774068},{"v":"ATG"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.83869},{"v":1.8545959},{"v":"AUS"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.7687},{"v":7.4919999},{"v":"AUT"},{"v":"point {size: 4; fill-color: #3366cc;}"}]}
]
}
);

【讨论】：