标签: google-visualization

在以下JSON中:

        var data = new google.visualization.DataTable(
            {
            cols: [{id: 'Option1', label: 'Manufacturer', type: 'string'},
                   {id: 'Option2', label: 'Region', type: 'string'},
                   {id: 'Option3', label: 'Option3', type: 'number'},
                   {id: 'Option4', label: 'Option4', type: 'number'},
                   {id: 'Option5', label: 'Option5', type: 'number'},
                   {id: 'Option6', label: 'Option6', type: 'number'},
                   {id: 'Option7', label: 'Option7', type: 'number'},
                   {id: 'Option8', label: 'Option8', type: 'number'}],


            rows: [{c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]},
                    {c:[{v: 'Ford'}, {v: 'South East'}, {v: …

使用以下代码如何设置格式,以便CurrencyValue1和CurrencyValue2在图表中以美元(作为货币值)显示？

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'CurrencyValue1');
    data.addColumn('number', 'CurrencyValue2');

    data.addRows(1);
    data.setValue(0, 0, new Date(2011, 8, 12));
    data.setValue(0, 1, 300.0000);
    data.setValue(0, 2, 759.1707);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, { width: 660, height: 470, title: 'Heading', is3D: true, backgroundColor: '#f5f3e5' });
}

我正在使用GoogleCharts沿一个轴绘制一个'datetime'类型的折线图.我想格式化轴标签,以便它们在指定的时区而不是默认的浏览器时区显示时间.

通过阅读文档,有一个DateFormat对象,可以提供'timeZone'选项,然后使用相应的DataTable列调用以格式化该列中的所有单元格.我注意到,如果将DataTable其绘制为表格,则执行此操作会导致格式正确的值.但是,相同的格式不适用于图表上的轴标签,如LineChart或Bar.

这是我的代码:

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('datetime', 'Time');
dataTable.addColumn('number', 'Wolves');
dataTable.addRows([
  [new Date(2020, 1, 1, 12), 1],
  [new Date(2020, 1, 1, 13), 3]
]);

// Create DateFormat with a timezone offset of -4
var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});

// Format the first column
dateFormat.format(dataTable, 0);

dataTable.getFormattedValue(0, 0); // "February 1, 2020 at 8:00:00 AM UTC-4"

var table = new google.visualization.Table(document.getElementById('wolf_table'));
table.draw(dataTable);

var lineChart = new …

我有一个柱形图,其x轴值是一个日期.这个图表今天早上起作用但突然断开并显示"不支持带有值域轴的条形系列".作为错误消息.该网站尚未在几周内更新.

我的DataTable构造代码如下所示:

var data= new google.visualization.DataTable({
        "cols":[{"label":"Date","type":"date"},{"label":"New Users","type":"number"}],
        "rows":[{"c":[{"v":new Date(1325656800000),"f":null},{"v":1355,"f":null}]}]
    });

我可以对我的代码做些什么来解决这个问题？

我正在尝试Google的GeoCharts.我有要在城市数据上显示的州数据和城市数据.这意味着我想同时使用geochart regions和markersdisplay模式.可以这样做,还是伪造？我似乎无法找到方法,但想知道是否有其他人取得了成功.

我正在使用Twitter Bootstrap框架在网页中通过Google Chart Tools创建图表.显示了三种类型的图表 - 饼图,折线图和柱形图,每个图表都在单独的选项卡中.图表数据通过Ajax接收.

通过Ajax接收数据后,图表即可正常显示.但是,如果我移动到另一个选项卡,即另一个图表,然后返回到第一个选项卡,则图表中的标签会重新排列错误.

此处包括显示更改标签前后问题的图像:

线图和柱形图也会出现此问题.

但是,如果我更改窗口然后返回,或者如果我隐藏然后重新显示图表,则不会出现问题.仅当我更改选项卡时才会发生.

标签的标记如下:

    <div class="charts-div" style="text-align: center">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-pie" data-toggle="tab">Pie</a></li>
                <li><a href="#tab-line" data-toggle="tab">Line</a></li>
                <li><a href="#tab-column" data-toggle="tab">Columns</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-pie">
                    <div class="chart pie-chart" id="pie-prt"></div>
                </div>
                <div class="tab-pane" id="tab-line">
                    <div class="chart line-chart" id="line-prt"></div>
                </div>
                <div class="tab-pane" id="tab-column">
                    <div class="chart column-chart" id="column-prt"></div>
                </div>
            </div>

    </div>

检查Chrome 22,IE9和Firefox 12.结果是一样的.在我的末尾没有编写额外的代码/事件来进行标签更改或标签焦点事件.

我有一个谷歌折线图,我设置'curveType': 'function'所以图形是弯曲的,具有漂亮的外观.我的问题是,当数据点的值为0,后跟一个跟随的高值时,图表下降到0以下,以便曲线可以正确拟合.这也导致vAxis的minRange为-2000,这对我的数据来说是不可能的(随着时间的推移下载次数).

我试图通过设置'minValue': 0和'viewWindowMode': 'maximized'在vAxis上解决这个问题,但它还没有完全解决问题.

我附上了一张图片,可以用文字解释我的问题.

http://img41.imageshack.us/img41/7589/screenshot20121031at144.png

如果有人知道这个解决方案,没有我必须回到直线,我将非常感激.谢谢

我在我的程序中使用Google Chart,该程序将在本地运行,无法访问互联网以使用Google Charts.你能告诉我在哪里可以下载图书馆,我在网上搜索但是没有找到任何可能的下载方式吗？

谢谢

我刚刚开始使用(新)Google Charts api,而且很酷.我用这个api成功创建了图表.

然而,我遇到了吞吐量挑战.在我的应用程序中,我从NOAA中提取的实时数据生成三个图表.获取数据,按下图表形式然后绘制客户端图表所需的时间是一种无法忍受的缓慢用户体验.

所以我的想法是在(托管的)服务器上定期生成图表(每15-30分钟),然后只为访问者提供最新的图像.

我看着phantomjs(在推荐这个帖子),但它看起来像它的.exe文件使用,我不能上传到我的共享主机.

还有这个专有解决方案的线程(Highcharts),但我想在沿着Highcharts路径前先探索开源替代方案.

其他解决方案专注于允许用户将渲染图表保存为图像,但我的目标是永远不会在浏览器中呈现图表,或者除了在页面请求时包含图像之外还有任何服务器负载.

我只是没有看到任何处理动态生成的图表,这些图表被"自动"转换为在呈现页面时"自动"提供的图像.

总之,以下是我想要拼凑的三件作品:

1)从第三方(在这种情况下为NOAA)提取数据并将数据呈现为Google图表(完成,此处没有问题)2)将每个渲染图表自动转换为图像,服务器端和创建图像URL 3)粘贴图像在呈现之前(通过php)将图表的URL(将经常刷新)到网页的html中

PS可以为每个图表图像设置一个静态URL ...我不是在创建图像存档...

有什么建议？我错过了什么吗？

我在html中使用带有dir ="rtl"标签的Google Charts从右到左网页时遇到了一个奇怪的错误.

会发生什么是页面占据了一个巨大的空间并且无缘无故地向左滚动.发生在我的Chrome和Safari上.

<html lang="ar" dir="rtl">

这是重现jsfiddle上的错误的最简单方法 https://jsfiddle.net/t4ve0kkf/

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');

  data.addRows([
    [{v: [8, 0, 0], f: '8 am'}, 1],
    [{v: [9, 0, 0], f: '9 am'}, 2],
    [{v: [10, 0, 0], f:'10 am'}, 3],
    [{v: [11, 0, 0], f: '11 am'}, 4],
    [{v: [12, 0, 0], f: '12 pm'}, 5],
    [{v: [13, 0, 0], f: '1 pm'}, 6],
    [{v: [14, …