图表标题来自<输入类型='text'>使用jquery

chart title from <input type='text'> with jquery

本文关键字：text gt jquery 使用 类型 输入 lt 标题      更新时间：2023-09-26

我是jquery的新手。我有一个html和jquery，它从csv中绘制一个折线图。我想在文本框中写一条文本，并将其附加到我的图表中。

感谢您的帮助：）

<div class="optionGroup"><label for="chart_title">Title</label><input type="text" name="chart_title" value="" id="chart_title"></div> 

var chart = new google.visualization.LineChart(document.getElementById('chart'));
//this is my attempt 
var titlus = +$('#chart_title').keyup(function(){ 
 var value = $( this ).val();
 $( 'chart'  ).text( value );
 })
var options = {
 title: titlus,//<--it should go here
 hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
 vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
 legend: 'none'
};
chart.draw(view, options);

您需要在开始时渲染图形，如果您想实时更改图形标题，则应在按键时重新绘制图形。为了做到这一点，必须添加加载的回调函数，因为呈现/API是异步的。作为一种建议，每当按下某个键时渲染图形都不是一种好的做法，最好创建一个按钮来提交标题或检测何时按下返回键。这是您所问的一个工作示例：

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.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'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        document.getElementById("chart_title").onkeyup = function() {
           options.title = this.value;
           chart.draw(data, options);
        }
      }
    </script>
  </head>
  <body>
    <div>
        Title: <input type="text" name="chart_title" value="" id="chart_title">
    </div>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
相关文章：