Tag: google visualization

设置google.visualization.DataTable的列宽

我想更改google.visualization.DataTable中列的宽度，但是，我不知道该怎么做。 提琴手： https ： //jsfiddle.net/dgbh6sL0/1/ HTML JS google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn(‘string’, ‘Name’); data.addColumn(‘number’, ‘Salary’); data.addColumn(‘boolean’, ‘Full Time Employee’); data.addRows([ [‘Mike’, {v: 10000, f: ‘$10,000’}, true], [‘Jim’, {v:8000, f: ‘$8,000’}, false], [‘Alice’, {v: 12500, f: ‘$12,500’}, true], [‘Bob’, {v: 7000, f: ‘$7,000’}, true] ]); var table = new google.visualization.Table(document.getElementById(‘table_div’)); table.draw(data, […]

谷歌图表重绘onclick

我正在尝试制作一个图表，通过各种下拉菜单和日期选择器可以从中选择数据。 我似乎找不到在点击事件中传递图表中的新数据的方法。 到目前为止我已经开始工作了onClick，它绘制了一个全新的图表。 但这似乎不是我的方式。 那么有另一种方法可以做到这一点吗？ HTML： Jaar 2015 2014 2013 JS： google.load(“visualization”, “1”, {packages:[“corechart”], “callback”: drawChart}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ [‘Task’, ‘Hours per Day’], [‘Work’, 1], [‘Eat’, 22], [‘Commute’, 32], [‘Watch TV’, 42], [‘Sleep’, 75] ]); var options = { chartArea: {width:’100%’,height:’100%’}, forceIFrame: ‘false’, is3D: ‘true’, pieSliceText: ‘value’, sliceVisibilityThreshold: 1/20, // […]

谷歌饼图百分比计算

我有一个以饼图forms显示数据的页面。 我使用谷歌图表，这里是代码： google.load(“visualization”, “1”, {packages:[“corechart”]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ [‘Product’, ‘Sale In Percent’], [‘product2’, 5.5], [‘product3’, 7.5], [‘product4’, 1.5], [‘product5’, 8.5], ]); var options = { title: ‘Product Sales’ }; var chart = new google.visualization.PieChart(document.getElementById(‘piechart2′)); chart.draw(data, options); } 这是一个有效的JS FIDDLE： https ：//jsfiddle.net/alex4uthis/j78vmq00/2/ 这里我还有1个产品作为product1，它的值是77.由于这个值总是更高，我从图表中省略了。 当我绘制图表时，我们可以看到product2百分比变为23.9％，product3百分比变为32.6等……但是我希望得到饼图绘制与我在’Sale In Percent’列中给出的内容。（表示产品1绘制5.5等…）请帮助我。

在隐藏的引导选项卡窗格上重绘Google图表

我在我的网络应用程序中使用谷歌散点图，它加载文件就绪。 我最近做了一些重组，并尝试在不同的引导选项卡中划分页面内容。 如果我在活动选项卡窗格上加载图表，它可以正常工作，图表的宽度，高度参数是正确的。 但是，如果我将图形移动到隐藏的选项卡，则图形无法正确加载函数传递的参数（特别是宽度和高度）。 目前我正在调用文档图表。 这是我的代码 HTML   Quick Stats   Engagement graph Some content 在准备好文件上加载图表 google.load(“visualization”, “1”, {packages: [“corechart”]}); $(document).ready(function () { $(‘#myMoodPage’).myMood({ graphDataUrl: ‘url(‘my_mood/mood_graph_data’); ?>’, graphData: , titles: [‘translate(‘time’); ?>’, ‘translate(‘mood’); ?>’, ‘translate(‘avg’); ?>’] }); }); function updatePageCharts() { $(‘#myMoodPage’).myMood(‘loadGraph’); } $(“a[href=’#engagement-graph’]”).on(‘shown.bs.tab’, function (e) { google.load(‘visualization’, ‘1’, { packages: [‘corechart’], callback: drawChart }); }); 这是我的主要JS文件，我在这里定义图形参数和其他东西（这个问题实际上并不相关，但为了完整性我只发布了整个函数） […]

谷歌图表加载消息

我有以下脚本可行，但有一个恼人的问题： google.load(“visualization”, “1”, {packages:[“corechart”]}); google.setOnLoadCallback(drawChartAjax); function drawChartAjax() { $.ajax({ url: ‘chart_json.aspx’, type: ‘POST’, dataType: ‘json’, success: function(data) { drawChart(data); } }); } function drawChart(json) { var data = new google.visualization.DataTable(); data.addColumn(‘string’, ‘User’); data.addColumn(‘number’, ‘v’); data.addRows(json.length); for(var j in json) { for(var k in json[j]) { data.setValue(parseInt(j), 0, k); data.setValue(parseInt(j), 1, json[j][k].v); } } var chart […]

Google Charts API使用$（document）.ready方法显示空白屏幕

我有几个使用Google Charts API实例化各种图表的函数。 当我在没有jQuery的$(document).ready方法的情况下调用它们时，一切正常。 但是用这种方法，我看着空白屏幕。 为什么？ function drawColumnChart1(){..some code..} function drawColumnChart2(){..some code..} function drawGeoChart(){.some code..} //This works fine. google.load(“visualization”, “1”, {packages:[“piechart”, “corechart”, “geomap”]}); google.setOnLoadCallback(window.drawColumnChart1); google.setOnLoadCallback(window.drawColumnChart2); google.setOnLoadCallback(window.drawGeoChart); //This doesn’t work $(document).ready(function(){ google.load(“visualization”, “1”, {packages:[“piechart”, “corechart”, “geomap”]}); google.setOnLoadCallback(window.drawColumnChart1); google.setOnLoadCallback(window.drawColumnChart2); google.setOnLoadCallback(window.drawGeoChart); }); 更新以下是我在Firebug中遇到的错误： uncaught exception: [Exception… “Could not convert JavaScript argument” nsresult: “0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: […]

Google柱形图 – 为每列显示不同的颜色

片段 google.load(“visualization”, “1”, {packages: [“corechart”, “bar”]}); google.setOnLoadCallback(drawStuff); function drawStuff() { var timesheetRes = [“Resouce 1″,”Resouce 2″,”Resouce 3″,”Resouce 4″,”Resouce 5”]; var timesheetWeek = [“Week 1″,”Week 2″,”Week 3″,”Week 4″,”Week 5”]; var timesheetHours = [45,40,40,0,0]; var dataArray = [[‘Resources’, ‘Week’, ‘Hours’]]; for (var n = 0; n < timesheetHours.length; n++) { dataArray.push([timesheetRes[n], timesheetWeek[n], timesheetHours[n]]); } var data = […]

即时刷新Google Visualization

我目前正在通过谷歌可视化创建谷歌图表，我希望能够通过点击按钮刷新/更新此图表。 我已经尝试了很多不同的方法来做到这一点，但没有一个工作，所以我正在寻找任何人可以做出的任何建议。 我目前的平台是ASP.net（使用C＃），谷歌的东西是用javascript / jquery编写的（显然）。 谢谢！

单独的Divs内的Google Visualizations图表的多个实例

我试图在同一个屏幕上的不同div中显示几个Google Gauge图表 。 我还需要处理这些div上的click事件（因此是图表）。 我试图动态地这样做，但我遇到了一些问题。 但无论如何，即使我尝试静态（有效），我仍然无法使图表区域可点击。 发生的事情是整个div是可点击的，除了图表区域。 无论如何，这是我的（杂乱测试）代码： document.getElementsByClassName = function (cl) { var retnode = []; var myclass = new RegExp(‘\\b’ + cl + ‘\\b’); var elem = this.getElementsByTagName(‘*’); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; }; google.load('visualization', '1', {packages:['gauge']}); google.setOnLoadCallback(function […]

Google Chart工具提示不起作用

我目前正在使用ASP.NET处理Google Chart并将其连接到数据库（SQL Server）。 但是在尝试自定义工具提示时遇到问题。 这是标题代码： google.charts.load(‘1.1’, { ‘packages’: [‘bar’] }); $(function () { $.ajax({ type: ‘POST’, dataType: ‘json’, contentType: ‘application/json’, url: ‘sample_page.aspx/GetChartData’, data: ‘{}’, success: function (response) { drawchart(response.d); // calling method }, error: function () { alert(“Error Loading Data”); } }); }) function drawchart(dataValues) { // Callback that creates and populates a data table, […]