3

我比较缺乏经验，所以请多多包涵。

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

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

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

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

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

4

1 回答 1

5

刚刚编写了一些可以帮助你的东西。对 BarChart、ColumnChart、LineChart 和 AreaChart 进行了测试，对我来说效果很好（按设计，PieChart 不能正常工作）。

主要构造函数代码：

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;
    };
}

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

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 */

});
于 2009-09-11T12:54:09.423 回答