注释颜色仅在Google条形图之外的文本时显示 [英] Annotation color only shows when text outside of Google Bar Chart

问题描述

我有一个Google

解决方案

关闭 annotations.highContrast

来自文档...

annotations.highContrast 使您可以覆盖Google图表中注释颜色的选择.
默认情况下， annotations.highContrast 为true，这会导致Charts选择具有良好对比度的注释颜色:深色背景为浅色，深色为浅色.
如果将 annotations.highContrast 设置为false，并且未指定自己的注释颜色，则Google图表会使用默认的系列颜色作为注释:

请参阅以下示例，请注意 textStyle.auraColor

的使用

  google.charts.load('current'，{回调:函数(){新的google.visualization.ColumnChart(document.getElementById('chart_div')).draw(google.visualization.arrayToDataTable([['Element'，'Density'，{角色:'annotation'}]，['Copper'，8.94，'Cu']，['Silver'，10.49，'Ag']，['Gold'，19.30，'Au']，['Platinum'，21.45，'Pt']])，{注释:{highContrast:否，textStyle:{auraColor:石灰"，颜色:#000000"，字体大小:18}}，颜色:['石灰']});}，软件包:['corechart']});  

 < script src ="https://www.gstatic.com/charts/loader.js"></script>< div id ="chart_div"></div>  

另一个选项可能是 annotations.alwaysOutside

I have a google bar chart and I am setting the font size and the color, however the color only applies when the text is outside of the bar. How do I force the color to apply?

 annotations: {
        textStyle: {
          fontSize: 18,
          color:'#000000'
        }
      }

解决方案

turn off annotations.highContrast

from the documentation...

annotations.highContrast lets you override Google Charts choice of the annotation color.
By default, annotations.highContrast is true, which causes Charts to select an annotation color with good contrast: light colors on dark backgrounds, and dark on light.
If you set annotations.highContrast to false and don't specify your own annotation color, Google Charts will use the default series color for the annotation:

see following example, note the use of textStyle.auraColor

google.charts.load('current', {
  callback: function () {
    new google.visualization.ColumnChart(document.getElementById('chart_div')).draw(
      google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'annotation' } ],
        ['Copper', 8.94, 'Cu' ],
        ['Silver', 10.49, 'Ag' ],
        ['Gold', 19.30, 'Au' ],
        ['Platinum', 21.45, 'Pt' ]
      ]),
      {
        annotations: {
          highContrast: false,
          textStyle: {
            auraColor: 'lime',
            color: '#000000',
            fontSize: 18
          }
        },
        colors: ['lime']
      }
    );
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

another option might be annotations.alwaysOutside

这篇关于注释颜色仅在Google条形图之外的文本时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！