Question

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

function drawVisualization() {
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", null, null, 7, 1, 0.5]);
data.addRow(["F", null, null, 7, 0.5, 1]);
data.addRow(["G", 'Foo', 'Foo annotation', 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", 'Bar', 'Bar annotation', 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.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
    curveType: 'function',
    width: 500,
    height: 400,
    vAxis: {
        maxValue: 10
    },
    annotations: {
        style: 'line',color:'#ff0000'
    }
 });
}

我想为Annotation提供颜色在上面的代码中，Color属性不适用于注释请有人帮我解决我犯错误的问题

Answer 1

更改行的颜色，尝试选项 - ＆gt; annotations.stem.color

要更改文字的颜色，请使用 - ＆gt; annotations.textStyle.color

    annotations: {
      style: 'line',
      stem: {
        color: '#ff0000'
      },
      textStyle: {
        color: '#ff0000'
      }
    }

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawVisualization();
    window.addEventListener('resize', drawVisualization, false);
  },
  packages:['corechart']
});
function drawVisualization() {
  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", null, null, 7, 1, 0.5]);
  data.addRow(["F", null, null, 7, 0.5, 1]);
  data.addRow(["G", 'Foo', 'Foo annotation', 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", 'Bar', 'Bar annotation', 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.
  new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {
    curveType: 'function',
    width: 500,
    height: 400,
    vAxis: {
      maxValue: 10
    },
    annotations: {
      style: 'line',
      stem: {
        color: '#ff0000'
      },
      textStyle: {
        color: '#ff0000'
      }
    }
  });
}

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

注意：

建议使用loader.js加载库，而不是jsapi

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

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

这将仅更改load声明

google.charts.load('current', {packages:['corechart']});

您还可以在callback语句中加入load，如上面的代码段所示......

如何为google line Chart中的Annotation提供颜色

1 个答案: