javascript 我怎样才能把一段文字放在我的谷歌图表的顶部?

8aqjt8rx  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(151)

我希望在我的图表中间有文字,如果可能的话也更新它。有人知道怎么做吗?
我已经在尝试注解,但无法显示

mrphzbgm

mrphzbgm1#

您可以使用an overlay as documented here完成此操作。
你有很多交互选项可以选择,使用css和js的各种组合。
我已经提供了一个简单的例子来完成您所要求的。文本可以完全用javascript更新,如图所示。
如果您需要或希望基于图表中的属性或元素进行放置计算,则文档提供了更复杂的示例。

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

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

  chart.draw(data, options);
}

function overlayUpdate() {
    let overlayDiv = document.getElementById('overlay');
    overlayDiv.innerHTML = '<div>Text updated</div>';
}
#chart {
    position: relative;
}
#curve_chart {
    width: 900px; 
    height: 500px;   
}
.overlay-text {
    width: 200px;
    height: 200px;
    position: absolute;
    font-family:'Arial Black'; 
    font-size: 60px;
    top: 100px;   /* chartArea top  */
    left: 400px; /* chartArea left */
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart">
    <div id="curve_chart"></div>
    <div id="overlay" class="overlay-text">
        <div>Your Text Here</div>
     </div>
 </div>
 
 <div>
 <button id="update" onclick="overlayUpdate();">Update Overlay</button>
 </div>

相关问题