我希望在我的图表中间有文字,如果可能的话也更新它。有人知道怎么做吗?我已经在尝试注解,但无法显示
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>
1条答案
按热度按时间mrphzbgm1#
您可以使用an overlay as documented here完成此操作。
你有很多交互选项可以选择,使用css和js的各种组合。
我已经提供了一个简单的例子来完成您所要求的。文本可以完全用javascript更新,如图所示。
如果您需要或希望基于图表中的属性或元素进行放置计算,则文档提供了更复杂的示例。