更改Google Charts AnnotationChart中的边框/背景？

Question

我正在尝试从Google的图表库中更改AnnotationChart的边框/背景。如果我使用标准backgroundColor选项，则图表无法呈现。对于this discussion，似乎其他图表类型上可用的backgroundColor选项无法在AnnotationChart上直接访问，但可通过未记录的选项获得。但是，当我尝试这个时，图表没有变化。下面是代码和结果图表;任何想法？

没有chart选项

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
    thickness: 1.5,
    displayAnnotations: true,
    colors: dataColors,
    displayZoomButtons: false,
    displayExactValues: false,
    displayDateBarSeparator: true,
};
chart.draw(data, options);

使用：

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
    thickness: 1.5,
    displayAnnotations: true,
    colors: dataColors,
    displayZoomButtons: false,
    displayExactValues: false,
    displayDateBarSeparator: true,
    chart: {
      backgroundColor: {
        fill:'black',
        stroke: 'white',
        strokeSize: 1
      },
      chartArea: {
        backgroundColor: {
          fill: 'blue',
          stroke: 'red',
          strokeSize: 1
        }
      }
    }
};
chart.draw(data, options);

无论哪种方式，图形如下所示：

Answer 1

可以像这样使用它来设置背景颜色。 Read the documentation here

像这样编辑你的代码

var options = {
    displayAnnotations: true,
    displayZoomButtons: false,
    displayExactValues: false,
    displayDateBarSeparator: true,
    chart: {
      backgroundColor: 'blue',
      chartArea: {
       backgroundColor: '#FFF000',
      },

    },
          fill: 50,

};

我尝试使用strokeWidth和stroke，但我认为它尚未得到支持或我使用不正确。

工作JSFIDDLE

Answer 2

由于缺少Google图表的自定义选项，我遇到了自己的问题，一种解决方法是在生成SVG后使用Javascript修改SVG，以产生您想要的外观。

我根据Google Charts Reference中的模板注释图表拼凑了一个快速小提琴，但下面是适用的代码行。它并不漂亮（特别是如果您使用交互式图表，因为这需要 MutationObserver 来监控SVG的更改）但是它可以正常工作并且您可以清理它还有更多。

注意：我注意到与谷歌图表的交互（例如缩放和平移）由于某种原因往往在JSFiddle和Codepen等中陷入困境，但在野外使用时它们会更加顺畅！

Annotation Chart Fiddle

My Related SO Question

/* One time recoloring of background after SVG creation - for static charts */

var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
  if (rects[i].getAttribute('fill') === '#ffffff') {
    rects[i].setAttribute('fill', '#99f');
  }
}


/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */

var observer = new MutationObserver(function(mutations) {
  var rects = container.getElementsByTagName("rect")
  for(var i=0; i<rects.length; ++i) {
    if (rects[i].getAttribute('fill') === '#ffffff') {
      rects[i].setAttribute('fill', '#99f');
    }
  }
});