Question

我是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);

Answer 1

您需要在开头渲染图形，如果要实时更改图形标题，则应在按下某个键时再次绘制图形。为此，必须添加用于加载的回调函数，因为呈现/ 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>

使用jquery从<input type =“text”/>创建图表标题

1 个答案: