Chrome无法使用<base href =“/”/>标记正确呈现Google Charts（堆积条形图）

Question

我有一个Angularjs应用程序，在标题中使用<base href="/">来表示漂亮的URL。此base标记似乎导致我的Google图表（堆积条形图）流出我的堆积条。

以下是其他浏览器的外观。

在Chrome中，它看起来像这样。

您可以使用此Plunker在此处进行测试。只需使用Chrome打开它即可。 http://plnkr.co/edit/RFUykT4ldyya93VWLxMr?p=preview

如果我删除了base代码，则Chrome会正确呈现该代码。这里发生了什么，我该如何解决这个问题？

Answer 1

冻结版本43的工作。 （请参阅此处的说明：https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions）

https://github.com/google/google-visualization-issues/issues/2072

Answer 2

已在similar issue GitHub存储库中报告了google-visualization-issues。

解决方法是在包含window.location属性的所有元素的哈希值之前添加clip-path：

function fixChart() {
    $('[clip-path]').each(function () {
        var fixedClipPath = $(this).attr('clip-path').replace('#', window.location + '#');
        $(this).attr('clip-path', fixedClipPath);
    });
}

工作示例

＆＃13;

＆＃13;

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

function drawChart() {

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'test');
    // a column for each bar (each bar has 1 data point)
    dataTable.addColumn('number', 'test');
    dataTable.addColumn({ type: 'string', role: 'style' });

    dataTable.addColumn('number', 'test');
    dataTable.addColumn({ type: 'string', role: 'style' });

    dataTable.addColumn('number', 'test');
    dataTable.addColumn({ type: 'string', role: 'style' });

    dataTable.addRows([
      ['test',
        58,
        'color: #59a9c0', // sky blue
        7,
        'color: #4ab87b', // sea green
        5,
        'color: gray'
      ]
    ]);

    // Setting Chart Options
    var options = {
        tooltip: { trigger: 'selection' },
        legend: 'none',
        isStacked: true,
        hAxis: {
            viewWindow: {
                min: 35,
                max: 80
            },
            ticks: [35, 40, 45, 50, 55, 58, 60, 65, 70] // display labels every specified point
        }

    };

    var chart = new google.visualization.BarChart(document.getElementById('barchart_stacked'));
    google.visualization.events.addListener(chart, 'ready', fixChart);
    chart.draw(dataTable, options);
}

function fixChart() {
    $('[clip-path]').each(function () {
        var fixedClipPath = $(this).attr('clip-path').replace('#', window.location + '#');
        $(this).attr('clip-path', fixedClipPath);
    });
}

＆＃13;

<base href="/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chartWithOverlay">
    <div id="barchart_stacked" style="width: 900px; height: 90px;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;