Question

我正在使用Material Bar Charts。然而，事实证明，每当我使用基本的href＆＃39;在我的页面上，图表将无法正常运行（如果您将鼠标悬停在它们消失的栏上）。您可以使用下面的代码尝试这一点。基本href不影响在Google中包含所需文件（但我想通过使用相对路径的javascript包含一些CSS）。

我真的想使用基础href。知道如何让它发挥作用吗？

图像（鼠标悬停在第一个条上，然后消失）：

enter image description here

FUNCTIONAL（无基础href）：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses', 'Profit'],
  ['2014', 1000, 400, 200]
  ]);

  var options = {
    bars: 'horizontal' // Required for Material Bar Charts.
  };

  var chart = new google.charts.Bar(document.getElementById('chart'));
  chart.draw(data, options);
}
</script>
</head>

<body>

<div id="chart" style="width: 900px; height: 500px;"></div>

</body>
</html>

NOT FUNCTIONAL（引入基础href）：

<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses', 'Profit'],
  ['2014', 1000, 400, 200]
  ]);

  var options = {
    bars: 'horizontal' // Required for Material Bar Charts.
  };

  var chart = new google.charts.Bar(document.getElementById('chart'));
  chart.draw(data, options);
}
</script>
</head>

<body>

<div id="chart" style="width: 900px; height: 500px;"></div>

</body>
</html>

使用基本href时，Google Material Bar Chart会停止工作

0 个答案: