Google线条图可视化图表在更新时消失？ [英] Google linechart visualization chart disappears when updating it?

问题描述

我希望能够更新谷歌可视化的折线图。我的代码受这个堆栈溢出帖子的启发。

以下是我的代码：

http://jsfiddle.net/YCqyG/5/

你会看到当你点击按钮click，图表突然消失。

当我注释掉这一行时，它似乎正在工作：

  // this.element.html（''）; 
  

它似乎不适用于折线图。任何想法为什么它不能用于折线图？

解决方案

似乎有几个关于jQuery使用的问题你的代码中的选择器;围绕你调用 $（元素）和 $（元素）[0] 等部分有些困惑。一般来说，我会避免jQuery在这里，刷新工程，通过替换两个：

• add（'LineChart '，'#mileage'） with add（'LineChart'，'mileage'）


• $（element）[0] with document.getElementById（element）

>

一些常规建议在这里：

• 您不需要清除div重新渲染一个图表（即：不需要调用 this.element.html（''），简单地传递一个新的数据表并重新调用 .draw（newDataTable，opts）很好。虽然有可能超出本文的需求，但新的 gviz动画功能就是一个很好的例子（你只需要调用重绘更新的数据，并且图表动画变化）。
  

• 显然，我并没有意识到您的实现的完整需求，但我觉得您的代码可能比您需要的稍微多一些。根据从服务器发送数据的方式，您可以轻松地重新加载图表。我已经在这个问题中提供了一些的详细信息，但是简单看起来是这样的：
  
  $ p $ function drawMyChart（dataTable）{
//将您的dataTable转换为正确的格式
//这里的选项包括从数组中加载，json数据表达式
//或者更多的手动数据
var opts = {height：50，width：50};
var chart = new google.visualization.LineChart（document.getElementById（'vis'））;
chart.draw（dataTable，opts）;

$ b $函数makeAjaxCall（）{
$ .ajax（{
url：'/ path / to / data / json'，
成功： drawMyChart（a），
dataType：'json'//这个很重要，它解释为json
}）;
}
// html somewhere
< div id ='vis'>< / div>
< input type ='button'onclick ='makeAjaxCall（）'> Go< / input>


希望有帮助。

I want to be able to update the line chart of google visualizations. My code was inspired by this Stack Overflow post.

Here is my code in question:

http://jsfiddle.net/YCqyG/5/

You'll see that when you click the button titled "click", the chart suddenly disappears.

---

UPDATE: When I comment out this line, it appears to be working:

// this.element.html('');

And it does not appear to work for the line chart. Any idea why it won't work for the line chart?

解决方案

There seem to be a few issues around the usage of jQuery selectors in your code; it's somewhat confusing around the sections where you're calling $(element) and $(element)[0] etc. In general I'd avoid jQuery here, the refresh works by replacing both of:

• add('LineChart', '#mileage') with add('LineChart', 'mileage')
• $(element)[0] with document.getElementById(element)

Some general advice here:

• You don't need to clear out the div before re-rendering a chart (i.e.: No need to call this.element.html(''), simple passing in a new data table and re-calling .draw(newDataTable, opts) is fine. Whilst potentially beyond the needs of this post, the new gviz animation functionality is a good example of this (you just call redraw with updated data, and the graph animates the change).

• Obviously I'm unaware of the full need of your implementation, but I feel like your code may be slightly more involved than you need. Depending on how you get can data sent from your server, you can pretty easily reload a chart. I've given some details in this question, but in brief it looks like this:

  function drawMyChart(dataTable) {
      // convert your dataTable to the right format
      // options here include loading from arrays, json representations of your datatable
      // or something more manual perhaps
      var opts = {height:50, width:50};
      var chart = new google.visualization.LineChart(document.getElementById('vis'));
      chart.draw(dataTable, opts);
  }
  
  function makeAjaxCall() {
      $.ajax({
          url: '/path/to/data/json',
          sucess: drawMyChart(a),
          dataType: 'json' // this is important, have it interpreted as json
      });
  }
  // html somewhere
  <div id='vis'></div>
  <input type='button' onclick='makeAjaxCall()'>Go</input>
  

Hope that helps.

这篇关于Google线条图可视化图表在更新时消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！