在 Google 图表上对齐注释文本

Question

我试图将我的注释文本推到折线图的顶部而不是中间。我要移动的注释与 x 轴数据相关联，因此显示在垂直线上旋转，所以看起来我需要做的就是将文本右对齐。

我知道 annotations.textStyle 配置选项，但 documentation 中没有显示对齐更改的示例，我一直在尝试一些我认为可行的选项，但没有任何变化它来自中心。

例如，在此 Fiddler 中，我认为 textStyle: {align: 'right'} 会起作用，但它没有任何影响 - 注释 'boost' 仍然显示在中心而不是顶部。

Answer 1

没有可用于调整对齐方式的选项，
但是你可以手动修改图表的svg，
当图表的 'ready' 事件触发时...

在这里，我找到了注释<text>元素并调整了x坐标（由于变换）

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

function drawVisualization() {
    // example copied from Google Visualization API playground,
    // modified for category axis annotations

    // 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", null, null, 7, 1, 0.5]);
    data.addRow(["F", null, null, 7, 0.5, 1]);
    data.addRow(["G", 'boost', '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 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]);

    var chart = new google.visualization.LineChart(document.getElementById('visualization'));

    google.visualization.events.addListener(chart, 'ready', function () {
      var labels = chart.getContainer().getElementsByTagName('text');
      Array.prototype.forEach.call(labels, function(label) {
        if ((label.getAttribute('text-anchor') === 'middle') && (label.hasAttribute('transform'))) {
          label.setAttribute('x', parseFloat(label.getAttribute('x')) + 100);
        }
      });
    });

    chart.draw(data, {
        curveType: 'function',
        width: 500,
        height: 400,
        vAxis: {
            maxValue: 10
        },
        annotations: {
            style: 'line',
        }
    });
}

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

注意：jsapi 加载程序是旧版本，请改用 loader.js，见上文...

在 Google 图表上对齐注释文本

Align annotation text on Google Chart

css

charts

linechart

google-visualization