jquery - 尝试使用 jquery 更新 google 可视化

Question

我比较缺乏经验，所以请耐心等待。

我正在使用 Google 可视化 API 开发一个简单的仪表板。我是用vb.net开发的。我的 apsx 上有带注释的时间轴、强度图和一组表格。

我想做的是根据用户使用注释时间线工具选择的日期范围更新强度图和表格。

我希望仅更新这些可视化效果，而不进行整页加载。显然，实现此目的的一个好方法是将可视化分离到独立的 aspx 页面中，并使用 jQuery 将它们“加载”到 div 中。

我说显然是因为这不起作用。当我尝试使用 jQuery 更新包含 Google 可视化的 aspx 时，我在浏览器中收到消息“正在从 www.google.com 加载数据...”，并且它只是连续运行并且永远不会返回。我由一位经验丰富的开发人员运行了这个程序，他被难住了，但我认为这一定是 google API 和 jQuery 之间的冲突。

非常感谢任何提示、建议、替代解决方案!

Answer 1

刚刚编写了一些可以帮助您的代码。针对 BarChart、ColumnChart、LineChart 和 AreaChart 进行了测试，对我来说效果很好(按设计不能正确用于 PieCharts)。

主要构造函数代码:

function Charts (options){
    var self = this;
    self.chart = [];
    self.dataTable = new google.visualization.DataTable();
    self.settings = $.extend({
        colors:['#98D8F4','#E85500','#B3CF2F', '#FEB800', '#FFA1C5', '#D984FF', '#DD9D75'],
        width: 960, height: 600,
    }, options);
    self.add = function(type, element){
        self.chart.push({
            element: $(element),
            o: new google.visualization[type]($(element)[0]),
            draw: function(dataTable, options){
                this.element.html('');
                this.o.draw(dataTable, options);
            }
        });
    };
    self.draw = function(options){
        var settings = $.extend({}, this.settings, options);
        $.each(self.chart, function(i, chart){
            chart.draw(self.dataTable, settings)
        })
    };
    self.parseData = function(labels, legends, data){
        var countRows = data[0].length;
        self.dataTable.addColumn('string', 'Name');
        $.each(legends, function(i, legend){
            self.dataTable.addColumn('number', legend);
        })
        self.dataTable.addRows(countRows);
        $.each(labels, function(i, label){
            self.dataTable.setValue(i, 0, label);
            $.each(data, function(k, entry){
                self.dataTable.setValue(i, k+1, data[k][i]);
            })
        })
        return self.dataTable;
    };
}

您可以简单地将数据作为数组传递来构建图表(在调用绘制方法之前必须始终解析数据)

var labels = [ "Kaspersky","Symantec","G-Data","Avira" ],
    legends = [ "Antivirensoftware (kostenpflichtig)","Antivirensoftware (kostenlos)","Internetsecurity (kostenpflichtig)","Internetsecurity (kostenlos)","Sonstiges, keine Angabe","Beta-Test KIS 2010", "Something Else" ],
    data = [ [46,4,7,33],[3,1,2,38],[42,12,14,7],[2,0,1,1],[43,8,14,18],[4,3,0,1],[1,2,4,2]];

除了脚本有点复杂之外，绘制图表还是很容易的。

var charts = new Charts();
charts.parseData(labels, legends, data);
charts.add('ColumnChart', '#column-chart');
charts.add('BarChart', '#bar-chart');
charts.draw({title: 'Antivirus Comparison Chart', titleY:'Points'});

轻松刷新

charts.parseData(otherLabels, otherLegends, otherData);
charts.draw({title: 'Antivirus Comparison Chart with Other Data', titleY:'Points'});

希望对你有帮助:)

哦，不要忘记加载库并将此脚本包含在文档就绪函数中，例如

google.load("jquery", "1.3.2");
google.load('visualization', '1', {'packages':['piechart','barchart','columnchart']});
google.setOnLoadCallback(function() {

/* script here */

});